Wix Studio エディタ:ハンバーガーメニューを使用する

読了時間:6分
ハンバーガーメニューは、訪問者がメニューアイコンをクリックしたときだけ表示される、すっきりとしたスペース効率の良いメニューです。

Wix Studio エディタでは、ハンバーガーメニューのデザイン要素を完全に制御できるため、クライアントの特定のブランディングやスタイルに合わせてカスタマイズすることができます。この柔軟性により、クライアントのビジョンに合わせた直感的なナビゲーション体験を作成することができます。
Wix Studio エディタサイトのハンバーガーメニューの例

ハンバーガーメニューを追加する

ハンバーガーメニューは、「要素を追加」パネルからいつでも追加可能です。クライアントのニーズに応じて、サイトに複数のメニューを追加し、個別に管理・カスタマイズすることができます。

ハンバーガーメニューを追加する方法:

  1. エディタ左側で「要素を追加 をクリックします。
  2. メニュー・検索」をクリックします。
  3. ハンバーガーメニュー」をクリックします。
  4. 該当するメニューをページ上の希望する場所にドラッグアンドドロップします。
Wix Studio エディタの「要素を追加」パネルで利用可能なハンバーガーメニューのデザイン

ハンバーガーメニューを管理する

サイトにハンバーガーメニューを追加したら、それに表示するメニューを選択します。個々のハンバーガーメニューに異なるメニューを表示し、それが属するページ / セクションに固有のコンテキストを提供することができます。

ハンバーガーメニューを管理する方法:

  1. ハンバーガーメニューアイコンを選択します。
  2. メニューを編集」をクリックします。
  3. 縦型メニュー要素を選択します。
  4. メニューを管理」をクリックします。
  5. 表示するメニューを選択」下のドロップダウンをクリックします。
    • 既存のメニュー:ドロップダウンからメニューを選択します。
    • 新しいメニュー:
      1. サイトメニューを管理」をクリックします。
      2. +メニューを追加」をクリックし、カスタムメニューを作成します。
ハンバーガーメニューで「メニューを管理」パネルが開いています。表示されたメニュードロップダウンにマウスオーバーしています。
ヒント:
パネル下部の「アイテムを追加」をクリックすると、選択したメニューにアイテムを追加できます。

ハンバーガーメニューをカスタマイズする

ハンバーガーメニューを追加したら、サイトのデザインと操作感に合わせてメニューのあらゆる部分をカスタマイズします。

ハンバーガーメニューをカスタマイズする方法:

  1. ハンバーガーメニューアイコンを選択します。
  2. カスタマイズするものを選択します: