ドロップダウンメニューやアコーディオンをStudio上で簡単に実装！「トグル」機能をリリース

サイト上のコンテンツ量をコントロールし、ユーザビリティの向上をサポートする「トグル」機能が登場しました。配置からデザイン、アニメーションの設定まで全ての工程がSTUDIO上で完結します。

トグル機能を使用しコンパクトなメニューが作成可能に

トグルを使った２つの活用例をご紹介します！

ドロップダウンメニュー

ドロップダウンメニュー（プルダウンメニュー）は、ヘッダー内のナビゲーションや、モーダルで頻繁に利用されている形式です。ページ数の多いサイトでも、ドロップダウンメニューを使用することで、サイト閲覧者にとってわかりやすいナビゲーションになります。

アコーディオン

アコーディオンは、ページ内のQ&Aコンテンツに頻繁に利用される形式です。ページが縦長になるとスクロールが大変ですが、アコーディオンを使うことでコンテンツを収納することが可能です。

開閉時の動作設定もデザイン上で簡単に

デザインエディター上でToggleを選択し、任意の箇所に配置します。開閉時のアニメーションは今回新たに登場した条件付きスタイル「クローズ」を使って設定が可能です。

また、３つの詳細の設定により、こだわりのアニメーションを表現することが可能です。これらの調整は設定パネルで簡単にできます。

• デフォルトで開く

  初めから中の要素を表示させ、サイト閲覧者の操作でトグルを要素を閉じることができます。

• 開く操作

  クリックまたはホバーのどちらの操作で開閉を行うかを設定できます。この設定により、ホバーが機能しないモバイル端末での操作にも対応が可能です。

• 要素外クリックで閉じる

  要素外をクリックした際にトグルを閉じ、中の要素を収納することができる機能です。

詳しい使い方や仕様はヘルプ記事をご覧ください。

条件付きスタイル

Toggleボックスの追加

STUDIOでは、公式Twitter のフォローや STUDIO Community Japan にて新機能リリースや使い方を公開しています。是非ご参加ください。