技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

今回はAxureのドロワーメニューの使い方を紹介します。ドロワー メニューでは、次の 2 つのインタラクティブな効果を実現する必要があります。

インタラクション 1

ドロワーメニューのレベル 1 およびレベル 2 メニュー項目のスケーリング効果

実装ロジック: 動的パネルの切り替え状態の設定と「オリジナルのプッシュ/プル」実装

インタラクション 2

メニュー項目の選択状態を切り替える

ロジックの実装: 補助ビューで選択状態を設定します。

実装手順を見てみましょう。

インタラクション 1: ドロワー メニューのレベル 1 およびレベル 2 メニュー項目のスケーリング効果

ステップ1

1. 動的パネル内をドラッグし、動的パネルのサイズを調整します。

2. 動的パネルをダブルクリックし、動的パネルの名前を「Menu 1」に設定し、2 つの動的パネルの状態を追加し、それぞれに名前を付けます: Collapse、Expand

ステップ2

1. 折りたたんだ状態をダブルクリックして、「折りたたんだ」ステータス ページに移動します。

2. 四角形をページにドラッグし、名前を「Menu 1-Collapse」に設定します。メニュー 1 のサイズを変更し、「メニュー 1」というテキストを入力します。

3. ドロップダウン矢印画像をドラッグしてサイズを調整します

ステップ3

「メニュー1-折りたたみ」のマウスオーバースタイルと選択スタイルを追加し、それぞれ文字色：青、塗りつぶし色：ライトグレーに設定します。

ステップ4

「メニュー 1-折りたたみ」四角形のマウス クリックを設定する場合の使用例:

「パネル状態の切り替え」アクションを選択し、「メニュー 1」を「展開」状態に切り替えて設定し、「コンポーネントのプッシュ/プル」属性を選択します。

ステップ5

1. 動的パネルの「折りたたみ」状態の内容を「展開」状態のページにコピーします。

2. [展開] ステータス ページで、四角形の名前を [メニュー 1-展開] に変更します。

インタラクション2: メニュー項目の選択状態を切り替える

ステップ6

1. 「Menu 1-Expand」をサブメニューとしてコピーし、名前コンポーネントのテキストを変更して、「Submenu 1」という名前を付けます。

2. サブメニュー 1 のマウス クリック イベントを設定し、「選択項目を設定」アクションを選択し、現在のコンポーネントが選択されるように設定します。

ステップ7

1. 複数のサブメニューをバッチでコピーし、テキストを変更し、それぞれに名前を付けます。

2. 複数のサブメニューをすべて選択した後、選択グループ名を設定します: 1

プレビューして効果を確認します。