![](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)
Toggleボックスを使うと簡単に作成できます
Toggleボックスについて
STUDIOのToggleボックス機能が、2023年6月下旬にリリースされました。
Toggleボックスは親要素と子要素を持ち、子要素の表示の切り替えができる部品で、プルダウンメニューやアコーディオンを簡単に作成できます。
![](https://mik2062.jp/wp-content/uploads/2022/05/8089e50294910c6cb163e5cb54ad137b-300x158.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/05/8089e50294910c6cb163e5cb54ad137b-300x158.jpg)
Toggleボックスの設置
デザインエディタ左端の>
をクリックして画面左端のパネルを開きます。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-17-1024x435.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-17-1024x435.png)
画面左側のパネルで追加
のタブを選択してToggle
を選択します。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-84.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-84.png)
この記事では、Toggleボックスの一番上の常に表示されているボックスを親要素
、表示と非表示が切り替わる部分を子要素
としています。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-24.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-24.png)
Toggleボックスの設定
Toggleボックスの設定を開くには、Toggleボックスを選択して画面右側のアイコンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-20-1024x530.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-20-1024x530.png)
ボックス
タブのトグル
にToggleボックスの設定が表示されます。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-22.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-22.png)
デフォルトで開く
ページが開いた状態で、子要素が表示されているかどうかを設定します。
ONの場合
チェックがONの場合、ページが開いた時点でToggeボックスが開いて子要素が表示されます。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-85.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-85.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-98.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-98.png)
OFFの場合
チェックがOFFの場合、ページが開いた時にToggeボックスが閉じていて子要素は表示されません、
![](https://mik2062.jp/wp-content/uploads/2023/07/image-89.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-89.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-99.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-99.png)
開く動作
親要素を開いて子要素を表示するための操作を設定します。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-30.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-30.png)
clickの場合
click
の場合は、Toggleボックスの親要素をクリックすると子要素が開いたり閉じたりします。
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-06-03-46-58.gif)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-06-03-46-58.gif)
hoverの場合
hover
の場合は、マウスカーソルをToggleボックスに乗せた時に子要素が開きます。
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-06-03-48-22.gif)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-06-03-48-22.gif)
要素外クリックで閉じる
Toggleボックス以外の場所をクリックした時に、開いている子要素を閉じるかどうかを設定します。
ONの場合
要素外クリックで閉じる
がONの場合、要素外をクリックすると開いている子要素が閉じます。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-41.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-41.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-05-22-13-02.gif)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-05-22-13-02.gif)
OFFの場合
要素外クリックで閉じる
がOFFの場合、要素外をクリックしても子要素は閉じず、親要素のクリックでのみ閉じます。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-45.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-45.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-05-22-22-29.gif)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-05-22-22-29.gif)
Toggleボックスの特徴
クローズ(閉じた状態)のスタイルを定義できる
親要素のボックスを選択してダブルクリックすると、右上に
![](https://mik2062.jp/wp-content/uploads/2023/07/image-120.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-120.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-121.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-121.png)
クローズはToggleボックスで使用できる条件付きスタイルで、Toggleボックスが閉じている状態の表示内容です。
最初からToggleボックスの開閉で親要素の右端のアイコンを180度変える設定がされています。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-123.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-123.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-129.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-129.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-126.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-126.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-128.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-128.png)
縦幅がauto
だと親要素の位置が動く
Toggleボックスの縦幅の初期値はauto
で、実行時に親要素の位置が動くことで、意図した動きにならない場合があります。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-63.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-63.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-06-05-57-29.gif)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-06-05-57-29.gif)
Toggleボックスの縦幅にサイズを指定すると、親要素の位置が固定された動きになります。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-64.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-64.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-06-06-02-16.gif)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-06-06-02-16.gif)
子要素を開く向きを変更できる
親要素のボックスを選択後にダブルクリックして、子要素の向きのアイコンから方向を変えることで、子要素が開く方向を変えることができます。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-133.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-133.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-09-07-53-23.gif)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-09-07-53-23.gif)
子要素に画像なども配置できる
子要素、親要素ともに文字やアイコンだけでなく、画像など好きな内容に編集できて、サイズも自由に変更できます。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-134.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-134.png)
プルダウンメニューの作成
ページにセクションを追加します。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-50-1024x298.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-50-1024x298.png)
セクションの高さを44px
にします。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-52-1024x289.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-52-1024x289.png)
セクションの中にボックスを配置して、横幅100%
縦幅44px
にします。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-53-1024x273.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-53-1024x273.png)
ボックスのタグを<nav>
に変更します。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-54-1024x259.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-54-1024x259.png)
①で作成したボックス内に、Toggleボックスを必要なメニューの数だけ配置します。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-55-1024x347.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-55-1024x347.png)
Toggleボックスを配置した親ボックスを選択して、子要素の向きを右矢印に変更して横向きに並べます。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-57-1024x343.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-57-1024x343.png)
各メニューの横幅を25%、縦幅を44pxにします。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-58-1024x295.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-58-1024x295.png)
一番左のToggleボックスを選択してダブルクリックします。
もう一度ダブルクリックした後で、子要素のボックスを選択してさらにダブルクリックして子要素のボックスを編集状態にします。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-61-1024x352.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-61-1024x352.png)
メニューに必要な数だけ、子要素のボックスをコピー&貼り付けします。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-62-1024x445.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-62-1024x445.png)
メニューの親要素や子要素のボックスを選択して、各メニューの文字や背景色を編集します。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-66.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-66.png)
選択しているメニューが分かりやすいように、ホバー時の動作をつけます。
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-07-06-18-53.gif)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-07-06-18-53.gif)
親メニューに効果を追加
親要素を選択してダブルクリックを2回した後、条件付きスタイルのボバーにチェックを入れます。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-69.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-69.png)
ここでは、透明度を0.5に設定します。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-68.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-68.png)
子メニューの編集
親要素を選択してダブルクリックを2回した後、今度は子要素をすべて選択して、条件付きスタイルのボバーにチェックを入れます。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-70.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-70.png)
今度はホバー時の色を少し変えて、選択していることが分かりやすくします。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-71.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-71.png)
これまでと同じ手順で他のToggleボックスも編集すれば、以下のようになりプルダウンメニューの完成です。
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-07-06-32-17-1.gif)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-07-06-32-17-1.gif)
アコーディオンを作成する
アコーディオンはToggleボックスを縦に並べるだけで完成です。
Toggleボックスを配置する親ボックスを選択して、子要素の向きを下向きに設定します。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-136.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-136.png)
プレビューするとアコーディオンの動作になっています。
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-09-09-00-37.gif)
![](https://mik2062.jp/wp-content/uploads/2023/07/Monosnap-screencast-2023-07-09-09-00-37.gif)