ハンバーガーメニューとは

ハンバーガーメニューとは、主にモバイルデバイスや小さな画面で使用されるコンパクトなナビゲーションメニューのことです。3本の横線が重なったアイコンとして表示されることが多く、このアイコンをタップすると、隠れていたナビゲーションメニューが展開され、ユーザーが簡単に他のページやセクションにアクセスできる仕組みです。

この記事では、PCサイズでは常時表示されるナビゲーションメニューを、モバイルやタブレットサイズでクリックにより表示・非表示を切り替えるハンバーガーメニューの作成方法を解説します。

追加パネルにある「ナビゲーション」パーツには、ハンバーガーメニューの機能が組み込まれています。このパーツを利用する場合、手順3の「メニューページの作成」から進めることができます。

事前準備

PCサイズ（ブレイクポイント：基準）で表示するメニューを先に準備しておきましょう。

PCサイズ（基準）で表示させたいナビゲーションメニューをモバイルとタブレットサイズでは非表示にします。

ナビゲーションメニューを選択し、画面左上の目のアイコンにカーソルを合わせます。表示されたチェックボックスから「タブレット」「モバイル」のチェックを外し、これらのサイズでメニューが表示されないように設定します。

次に、タブレットとモバイル用のメニューアイコンを配置します。まず、ブレイクポイントを「タブレット」に変更します。

PCサイズで設定したナビゲーションメニューが非表示になっていることを確認したら、追加パネルからハンバーガーメニューアイコンを配置します。

アイコンを選択し、画面左上の目のアイコンで「基準」のチェックを外し、PCサイズで表示されないように設定します。

ハンバーガーメニューアイコンをクリックした際に表示されるメニューを、モーダルで作成します。画面右上の「ページ追加」ボタンから「モーダル」を選び、メニューをデザインします。モーダルには、閉じるためのボタンも必ず配置しましょう。

画像では閉じるボタンを画面右上に絶対位置で固定表示しています。

そしてモーダルを閉じるためのリンクを設定します。ボタンを選択し、画面右側の設定パネルを開きます。リンク設定で[モーダルを閉じる]を選択します。

最後に、メニューアイコンと作成したメニューページをリンク設定で繋げます。配置したアイコンを選択し、画面右上のリンクチップをクリックします。「ページ」タブから、先ほど作成したメニューページ（モーダル）を選択します。

これで、メニューアイコンをクリックするとメニューが表示されるようになります。プレビューで確認し、問題がなければサイトを更新して反映させてください。

ハンバーガー ハンバーガーメニュー モバイルメニュー