ハンバーガーメニューとは、３本線のアイコンをクリックすると、隠れているWebページのメニュー画面が表示される仕組みです。

スマートフォン向けのアプリやサイトへの設置が主流でしたが、近年ではPC向けのサイトなどでも使われることが増えています。

この記事では、ハンバーガーメニューの役割〜作成方法まで解説します。

ハンバーガーメニューの主な役割は、見た目をスッキリ見せることです。

例えば、ユーザーに様々な情報を提供しようとして、たくさんのメニュー項目で埋まっていると、非常に使いづらい印象を与えてしまいます。

このようなケースに、ハンバーガーメニューが有効です。たくさんあるメニュー項目をハンバーガーメニューの中にしまうことでスッキリとした印象になります。

サイドバーの追加＞ライドボックスより、メニューを作成します。

各項目に任意のテキストを指定し、設定パネルでメニューに名前を設定します。

ハンバーガーボタンを設置していきます。

サイドバーの追加＞エレメントより、ボックスとボタンを配置します。

次に、スタイル＞ボジションでボックスのポジションをabusoluteに指定し、topの値を0に変更します。

スタイル＞バックグラウンドより、ボックスとボタンの背景を透過の状態に設定します。

次に、ボタンを選択した状態で、設定＞リンク＞ライトボックスより作成したメニューを設定します。

最後に、レイアウトとサイズで位置調整を行います。

最後に、ボタンの文字をアイコンに変更します。

ボタン内のテキストを削除し、スタイル＞アイコンよりアイコンを追加します。

アイコンを指定した状態で、設定パネルのアイコンを押下し、サイドバーより任意のアイコンを設定します。

スタイル＞タイポグラフィーでアイコンのカラーとサイズを指定します。

設定＞ライトボックスでボタンにメニューが設定されていることを確認し、プレビュー画面でハンバーガーメニューの挙動を確認します。

ハンバーガーメニューをモバイルのみで表示したい場合は、ボタンを選択した状態でブレークポイントをモバイルに指定し、スタイル＞表示でオフにします。

要素の表示・非表示に関しては、こちらの記事をご参照ください。