メニュー

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

STUDIO
当ページのリンクには広告が含まれています。
  • URLをコピーしました！
生徒

STUDIOでプルダウンメニューは作れますか？

先生

STUDIOでプルダウンリストを作る方法を説明します。

目次

STUDIOのデザインエディタについて

STUDIOは、デザインエディタでさまざまな画面をノーコードで作成できますが、独特な操作も多くて少し慣れが必要です。

この記事では、WEBサイトでよく使うプルダウンメニューをSTUDIOで作成する手順を説明します。

2023年6月にSTUDIOにトグル機能が追加されて、トグル機能を利用してプルダウンリストを作成することもできるようになりました。

あわせて読みたい
STUDIOのToggleボックスでプルダウンメニューやアコーディオンを作成する STUDIOでプルダウンメニューを作成したいです Toggleボックスを使うと簡単に作成できます Toggleボックスについて STUDIOのToggleボックス機能が、2023年6月下旬にリリ…

この記事で作成するプルダウンメニュー

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

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

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

プルダウンメニューの作成手順

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

名称横幅縦幅
Header100%80px

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

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

名称横幅縦幅
BaseMenu80%80px

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

名称横幅縦幅
BaseMenuItem150px80px

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

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

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

名称横幅縦幅
MenuItem150px80px

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 にします

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

STUDIO
よかったらシェアしてね！
  • URLをコピーしました！
目次