ハンバーガーメニューの作成方法

クリックに応じてメニューを表示・非表示する「ハンバーガーメニュー」の作成方法を解説します。レスポンシブデザインのWebサイトで一般的に使われる機能で、PCサイズではメニューを常に表示し、タブレット・モバイルサイズではハンバーガーアイコンを押すことでメニューを切り替えられます。

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

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

非表示設定したい要素を選択した状態で、画面左上の目のアイコンにカーソルを合わせます。デフォルトでは、「基準」「タブレット」「モバイル」がチェックされた状態です。

チェックが入っているブレイクポイントでは要素が表示され、チェックが外れているブレイクポイントでは非表示になります。

今回は、PCサイズ（基準）のみにナビゲーションメニューを表示したいので、タブレットとモバイルのチェックを外します。

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

PCサイズ（基準）で表示されるナビゲーションメニューが非表示になっていることが確認できたら、追加パネルよりアイコンを配置します。

配置したアイコンは、タブレットとモバイルでのみ表示させたいので、選択した状態で画面左上の目のアイコンにカーソルをあて、基準のチェックを外します。

アイコンをクリックした際に表示させるメニューをモーダルで作成します。画面右上のページ追加ボタンをクリックし、ページタイプ「モーダル」を追加します。

ページにはモーダルを閉じる為のボタンも配置しましょう。

モーダルにアイコンを配置し、アイコンのリンク設定で「モーダルを閉じる」を選択します。これで、アイコンをクリックした際にモーダルが閉じるようになります。

また、<backdrop>レイヤーを選択した状態でトランジションを設定すると、アイコンをクリックした時に表示されるメニューの表示方法が設定できます。

メニューページ（モーダル）とメニューアイコンをリンク設定で繋げるため、アイコンを配置したページを開きます。

メニューアイコンを選択し、右上のリンクチップをクリックしてボックス設定パネルを開きます。 リンク設定でページタブをクリックし、先ほど作成したメニューページ（モーダル）を選択します。

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

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