![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
STUDIOでプルダウンメニューは作れますか?
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
STUDIOでプルダウンリストを作る方法を説明します。
目次
STUDIOのデザインエディタについて
STUDIOは、デザインエディタでさまざまな画面をノーコードで作成できますが、独特な操作も多くて少し慣れが必要です。
この記事では、WEBサイトでよく使うプルダウンメニューをSTUDIOで作成する手順を説明します。
2023年6月にSTUDIOにトグル機能が追加されて、トグル機能を利用してプルダウンリストを作成することもできるようになりました。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://mik2062.jp/wp-content/uploads/2023/07/8089e50294910c6cb163e5cb54ad137b-300x158.jpg)
![](https://mik2062.jp/wp-content/uploads/2023/07/8089e50294910c6cb163e5cb54ad137b-300x158.jpg)
![](https://mik2062.jp/wp-content/uploads/2023/07/8089e50294910c6cb163e5cb54ad137b-300x158.jpg)
STUDIOのToggleボックスでプルダウンメニューやアコーディオンを作成する
STUDIOでプルダウンメニューを作成したいです Toggleボックスを使うと簡単に作成できます 【Toggleボックスについて】 STUDIOのToggleボックス機能が、2023年6月下旬に…
作成するプルダウンメニュー
今回作成するのは以下のようなシンプルなプルダウンメニューです。
![](https://mik2062.jp/wp-content/uploads/2022/05/menu.gif)
![](https://mik2062.jp/wp-content/uploads/2022/05/menu.gif)
完成時のSTUDIOのレイヤーの構成は以下になります。
![](https://mik2062.jp/wp-content/uploads/2022/05/dropdownmenu-1-284x300.png)
![](https://mik2062.jp/wp-content/uploads/2022/05/dropdownmenu-1-284x300.png)
作成手順
最初に、メニューを作成する場所に土台となるボックスを作成します。
名称 | 横幅 | 縦幅 |
---|---|---|
Header | 100% | 80px |
![](https://mik2062.jp/wp-content/uploads/2024/04/image-4-1024x296.png)
![](https://mik2062.jp/wp-content/uploads/2024/04/image-4-1024x296.png)
![](https://mik2062.jp/wp-content/uploads/2024/03/image-233.png)
![](https://mik2062.jp/wp-content/uploads/2024/03/image-233.png)
次に、最初のボックスの中に、メニューの土台となるボックスを作成します。
名称 | 横幅 | 縦幅 |
---|---|---|
BaseMenu | 80% | 80px |
![](https://mik2062.jp/wp-content/uploads/2022/05/Header-1-1024x407.png)
![](https://mik2062.jp/wp-content/uploads/2022/05/Header-1-1024x407.png)
さらに、その中にメニュー項目の土台となるボックスを作成します。
名称 | 横幅 | 縦幅 |
---|---|---|
BaseMenuItem | 150px | 80px |
![](https://mik2062.jp/wp-content/uploads/2022/05/BaseMenuItem-1024x375.png)
![](https://mik2062.jp/wp-content/uploads/2022/05/BaseMenuItem-1024x375.png)
親要素(BaseMenu)を選択すると上にボタンが表示されるので、右寄せボタンを押して右寄せにします。
![](https://mik2062.jp/wp-content/uploads/2022/05/Right-1-1024x230.png)
![](https://mik2062.jp/wp-content/uploads/2022/05/Right-1-1024x230.png)
右に寄せたボックスの中に、さらにメニュー項目のボックスを作成して、その中にテキストを中央寄せで配置します。
名称 | 横幅 | 縦幅 |
---|---|---|
MenuItem | 150px | 80px |
![](https://mik2062.jp/wp-content/uploads/2022/05/MenuItem-1024x382.png)
![](https://mik2062.jp/wp-content/uploads/2022/05/MenuItem-1024x382.png)
MenuItemボックスを選択して、右クリックメニューから「ホックスの複製」を2回行います。
![](https://mik2062.jp/wp-content/uploads/2022/05/BoxDuplicate-1024x308.png)
![](https://mik2062.jp/wp-content/uploads/2022/05/BoxDuplicate-1024x308.png)
![](https://mik2062.jp/wp-content/uploads/2022/07/image-253.png)
![](https://mik2062.jp/wp-content/uploads/2022/07/image-253.png)
分かりやすくするために、複製した下2個のボックスの名称を、”SubMenuItem”に変更します。
![](https://mik2062.jp/wp-content/uploads/2022/07/image-254.png)
![](https://mik2062.jp/wp-content/uploads/2022/07/image-254.png)
2個のSubMenuItemを選択して「モーション」タブで以下の設定を行います。
- 透明度を0にする
- スケールのYを0にする
- 時間を0にする(見せ方の設定なので違う内容に変えるのでもよいです)
![](https://mik2062.jp/wp-content/uploads/2022/05/SubMenu-1-1024x351.png)
![](https://mik2062.jp/wp-content/uploads/2022/05/SubMenu-1-1024x351.png)
今度は親要素の BaseMenuItemを 選択して「ボバー」時の「モーション」タブで時間
を 0 に設定します。
![](https://mik2062.jp/wp-content/uploads/2022/07/image-256-1024x258.png)
![](https://mik2062.jp/wp-content/uploads/2022/07/image-256-1024x258.png)
その後に、再度SubMenuItemを選択してinホバー
イベントで以下を設定します。
- 透明度を 1 にします
- 時間を 0 にします
- スケールのYを 1 にします
![](https://mik2062.jp/wp-content/uploads/2022/07/image-258-1024x366.png)
![](https://mik2062.jp/wp-content/uploads/2022/07/image-258-1024x366.png)
以上で作成は完了です。ライブプレビューを行うと以下のように動作します。
![](https://mik2062.jp/wp-content/uploads/2022/05/menu.gif)
![](https://mik2062.jp/wp-content/uploads/2022/05/menu.gif)