STUDIOで、クリックに応じてメニューを表示・非表示するような「ハンバーガーメニュー」を作成するステップを解説します。

今回は通常のWebサイトによくあるような、PCサイズの場合はナビゲーションが表示され、モバイル、タブレットサイズのみにハンバーメニューを表示するようなレイアウトを作成していきます。

 

ハンバーガーメニューを作成するには、主に3つのステップが必要です。

  1. PCサイズでのナビゲーションメニューを非表示にする
  2. モバイル、タブレットサイズにて、メニューを開閉させるトリガーを作成
  3. メニューを作成し、トリガーと紐付ける

 

1. PCサイズでのメニューを非表示にする

まず、モバイル&タブレットサイズでハンバーガーメニューを作成するために、PCサイズで作成したナビゲーションメニューを非表示しましょう。

要素の表示・非表示設定は、要素を選択した状態で左上の目のアイコンにカーソルを合わせることで設定可能です。

今回は、PCサイズ(デフォルトサイズ)のみにナビゲーションメニューを表示したいので、非表示にしたいナビゲーションを選択した状態でタブレットとモバイルのチェックを外します。

 

 上記の状態で デフォルトのみで要素が表示され、タブレット&モバイルサイズではナビゲーションメニューは非表示設定になりました。

 

 

2. モバイル&タブレットサイズにて、メニューを開閉させるトリガーを作成

次に、スクリーンサイズをタブレット、またはモバイルサイズに変更しましょう。すると先ほど1で設定したナビゲーションメニューは、非表示になるはずです。

その部分に、ハンバーガーメニューを開閉させるトリガーとなるアイコンやテキストを配置しましょう。(今回はメニューアイコンを例として配置します。)

こちらのメニューアイコンは、モバイル&タブレットサイズでのみ表示したいので、今度はこのアイコンを選択し、デフォルトでの表示のチェックを外しておきましょう。

 

 

3. メニューを作成し、トリガーと紐付ける

 最後にトリガーをクリックしたら表示させたいメニューを作成していきましょう。

メニューを追加するには、何も要素を選択していない状態で上部に表示させるページメニューから、「ページを追加」をクリックし、「モーダル」を選択します。

 

すると、新しくメニュー用のページが作成されるのでこのメニューをデザインしていきましょう。

表示の仕方はトランジションで自由に設定が可能です。

 

デザインが完了したら、今度は先ほど作成したトリガーのメニューアイコンがあるページに戻り、メニューアイコンにトリガーを設定していきます。

メニューアイコンを選択し、右上のリンクパネルを開きます。

そしてリンク先に、先ほど作成したメニューページを選択します。

 

 

これで、メニューアイコンをクリックすることで開閉するメニューが完成です。

 

こちらの機能を応用すれば、モーダルやライトボックス、ドロップダウンメニューなども作成可能なのでぜひ挑戦してみてください!

 

 

 

 

Did this answer your question?