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

ハンバーガーメニューは、(なんとなく)ハンバーガーの形をしたアイコンからアクセスできるスライダーメニューです。 フルヘッダーメニューを表示できない小さい画面サイズのレスポンシブWebサイトでよく使用されます。

ハンバーガーメニューを作成する

  1. 現在のヘッダーメニューを非表示にする

ハンバーガーメニューは通常、タブレットやモバイルにおいてヘッダーメニューに代わるものです。

そのため、まず始めに小さい画面のデバイスのヘッダーを非表示にします。

非表示にしたいヘッダーバーを選択して、左上にある「表示」をクリックします。メニューを非表示にするデバイスのチェックを外します。

  1. ハンバーガーメニューのアイコンを追加します
  1. レスポンシブバーを使用して、タブレットのブレイクポイントに切り替えます。
  2. 左サイドの要素パネルを拡張して、アイコンを探します。「アイコン」を選択し「menu」を検索します。
  3. 必要に応じてサイズ、色を変更します。

次に、「表示」をクリックして、メニューを表示したくないデバイスのチェックを外します。

例えば、ハンバーガーメニューをモバイルとタブレットのみ表示する場合は、「default」のチェックを外します。

  1. スライドメニューを作成する

ユーザーがハンバーガーアイコンをクリックしたときに表示される、スライドメニューを作成します。

スライドメニューを作成するには、ページ右上の +マークをクリックしてモーダルを選択し、モーダルを作成します。サイドメニューとしてモーダルを作ります。

テキストとスタイルを追加して、モーダルをカスタマイズします。

  1. アイコンとモーダルメニューをリンクする

アイコンとメニューの準備ができたら、アイコンを選択し、右上の矢印をクリックし、メニューを選択してリンクを追加します。

  1. ライブプレビューを起動して、実際にハンバーガーのメニューがどのように見えるか確認します。

ライブプレビューボタンは、編集画面の右上にあります。

Did this answer your question?