ハンバーガーメニューとは、その形状がハンバーガーに似ていることから名付けられたUIの一種です。Webサイトのナビゲーションメニューをまとめるために使用されます。特に、スマートフォンやタブレットなどの幅の狭いデバイスだと、ヘッダーのメニューが表示しきれないため、ハンバーガーメニュー利用することが多いです。今回は、ハンバーガーメニューをSTUDIOで実装する時の手順を紹介していきます。

※ 参考資料：STUDIOを活用するメリット・デメリット

STUDIOでハンバーガーメニューを作る方法

STUDIOでハンバーガーメニューを作る手順は大きく3ステップです。

1. ヘッダーにアイコンを追加

2. メニューモーダルの作成

3. アイコンとモーダルを紐づける

1. ヘッダーにアイコンを追加

まずは、ヘッダーの右端にアイコンを追加します。"menu"と検索すると、3本線のアイコンを追加できます。

今回は、モバイル・ミニでハンバーガーメニューを実装したいので、アイコンをモバイル・ミニのみで表示させます。テキストのメニューは、モバイル・ミニで表示させたくないので、モバイル・ミニのチェックを外しておきます。

すると、PCからタブレットまでの範囲ではテキストのメニューが、モバイルからミニまでの範囲ではハンバーガーメニューが表示されるようになりました。

2. メニューモーダルの作成

次にハンバーガーアイコンを押した時に表示される、メニューモーダルを作成していきます。ページ上部にあるページ追加ボタンからモーダルを選択し、メニューを作っていきます。

このままだとモーダルを閉じることができないので閉じるボタンを設置していきます。バツ印のアイコンを右上に絶対配置で設置し、「モーダルを閉じる」をリンク先として設定します。

3. アイコンとモーダルを紐づける

これで、ヘッダーのアイコンの準備と、表示させるモーダルの準備が整いました。最後に、ハンバーガーアイコンを押したら、メニューが表示されるように設定していきます。モバイル版で、ハンバーガーアイコンをタップし、先ほど作ったモーダルをリンク設定で選択します。

メニューモーダルが表示されるトランジションも設定していきましょう。6パターンから選ぶことができます。今回はモーダルが右から表示されるように設定します。モーダルの一番外の枠を選択し、トランジションを設定しましょう。

最後にプレビューで確認するとこんな感じです。

まとめ

今回の記事では、STUDIOでハンバーガーメニューを作成する方法について解説しました。STUDIOの公式Youtubeでも解説されているので、ぜひこちらもご覧ください。