STUDIOのToggleボックスでプルダウンメニューやアコーディオンを作成する

Toggleボックスについて

以前は、プルダウンやアコーディオンを作るには、ボックスを並べて、各ボックスが親要素と子要素の動作になるように設定を編集する必要がありました。

Toggleボックスの設置

デザインエディタ左端の＞をクリックして画面左端のパネルを開きます。

画面左側のパネルで追加のタブを選択してToggleを選択します。

Toggleボックスの設定

Toggleボックスの設定を開くには、Toggleボックスを選択して画面右側のアイコンをクリックします。

ボックスタブのトグルにToggleボックスの設定が表示されます。

デフォルトで開く

ページが開いた状態で、子要素が表示されているかどうかを設定します。

ONの場合

チェックがONの場合、ページが開いた時点でToggeボックスが開いて子要素が表示されます。

OFFの場合

チェックがOFFの場合、ページが開いた時にToggeボックスが閉じていて子要素は表示されません、

開く動作

親要素を開いて子要素を表示するための操作を設定します。

clickの場合

clickの場合は、Toggleボックスの親要素をクリックすると子要素が開いたり閉じたりします。

hoverの場合

hoverの場合は、マウスカーソルをToggleボックスに乗せた時に子要素が開きます。

要素外クリックで閉じる

Toggleボックス以外の場所をクリックした時に、開いている子要素を閉じるかどうかを設定します。

開く動作がclickの場合のみの設定で、hoverの場合は常にToggleボックス外へのカーソルの移動で子要素が閉じる動きです。

ONの場合

要素外クリックで閉じるがONの場合、要素外をクリックすると開いている子要素が閉じます。

OFFの場合

要素外クリックで閉じるがOFFの場合、要素外をクリックしても子要素は閉じず、親要素のクリックでのみ閉じます。

Toggleボックスの特徴

クローズ（閉じた状態）のスタイルを定義できる

親要素のボックスを選択してダブルクリックすると、右上にアイコンが表示されます。

アイコンをクリックするとに変わり、 クローズの条件付きスタイルが表示されます。

縦幅がautoだと親要素の位置が動く

Toggleボックスの縦幅の初期値はautoで、実行時に親要素の位置が動くことで、意図した動きにならない場合があります。

Toggleボックスの縦幅にサイズを指定すると、親要素の位置が固定された動きになります。

子要素を開く向きを変更できる

親要素のボックスを選択後にダブルクリックして、子要素の向きのアイコンから方向を変えることで、子要素が開く方向を変えることができます。

子要素に画像なども配置できる

子要素、親要素ともに文字やアイコンだけでなく、画像など好きな内容に編集できて、サイズも自由に変更できます。

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

アコーディオンを作成する

プレビューするとアコーディオンの動作になっています。