STUDIOでのプルダウンメニューの作り方

作成するプルダウンメニュー

今回作成するのは以下のようなシンプルなプルダウンメニューです。

パーツの構成が分かりやすいように派手な背景色にしています。作成する際は色は自由に変えてください。

完成時のSTUDIOのレイヤーの構成は以下になります。

作成手順

最初に、メニューを作成する場所に土台となるボックスを作成します。

名称	横幅	縦幅
Header	100%	80px

ボックスの名称は動作に関係しないですが、分かりやすいように付けています。

次に、最初のボックスの中に、メニューの土台となるボックスを作成します。

名称	横幅	縦幅
BaseMenu	80%	80px

さらに、その中にメニュー項目の土台となるボックスを作成します。

名称	横幅	縦幅
BaseMenuItem	150px	80px

ここではメニュー1個で作成していきます。2個以上にしたい場合でも、まずは1個で完成させてから、ここからの手順を繰り返して2個目以降を作っていく方が分かりやすいです。

親要素（BaseMenu）を選択すると上にボタンが表示されるので、右寄せボタンを押して右寄せにします。

右に寄せたボックスの中に、さらにメニュー項目のボックスを作成して、その中にテキストを中央寄せで配置します。

名称	横幅	縦幅
MenuItem	150px	80px

MenuItemボックスを選択して、右クリックメニューから「ホックスの複製」を2回行います。

2個複製した後のMenuItemの並びが以下の画像と違う場合は、BaseMenuItemを選択して上揃えの下向きを設定します。

分かりやすくするために、複製した下2個のボックスの名称を、”SubMenuItem”に変更します。

2個のSubMenuItemを選択して「モーション」タブで以下の設定を行います。

• 透明度を0にする
• スケールのYを0にする
• 時間を0にする（見せ方の設定なので違う内容に変えるのでもよいです）

今度は親要素の BaseMenuItemを 選択して「ボバー」時の「モーション」タブで時間を 0 に設定します。

STUDIOではホバー時の値を何か変更しないとホバーイベントが作動せず、子要素のinホバーイベントを設定できないので、ここでは時間を変更しています。ホバー時に何も変更させたくない場合でも、透明度を一旦1以外に変更後に1に戻す、などの操作が必要です。（1度値を変更すれば、初期値に戻してもホバーイベントは作動します。）

その後に、再度SubMenuItemを選択してinホバーイベントで以下を設定します。

• 透明度を 1 にします
• 時間を 0 にします
• スケールのYを 1 にします

以上で作成は完了です。ライブプレビューを行うと以下のように動作します。