Editor X：ハンバーガーメニューを使用する

ハンバーガーメニューは、訪問者がメニューアイコンをクリックしたときにのみ表示される、シンプルで省スペースのメニューです。ハンバーガーメニューのデザインをサイトのデザインに合わせてカスタマイズしましょう。サイドバーまたは全画面メニューのどちらで開くかを選択することもできます。

ハンバーガーメニューをサイトに追加したら、以下のパーツをカスタマイズして独自のメニューを作成しましょう。

ハンバーガーメニューを開くために訪問者がクリックするボタンをカスタマイズします。「デザイン」アイコン  をクリックし、ボタンの塗りつぶし色、枠線、影を調整します。「シェイプを変更」をクリックして、別のアイコンを選択することもできます。

メニューアイコンをクリックし、「メニューを開く」を選択して、メニューを含むコンテナにアクセスします。

次に、メニューコンテナを選択し、以下を実行してカスタマイズします：

訪問者がメニューを閉じるためにクリックするアイコンをカスタマイズします。デフォルトでは、X アイコンはメニューコンテナの右上に表示されますが、いつでも移動できます。

要素設定パネルで「デザイン」アイコン  をクリックして、、ボタンの塗りつぶし色、枠線、影を調整します。「シェイプを変更」をクリックして、別のアイコンを選択することもできます。

これは実際のメニューパーツです。「メニューを管理」をクリックして、表示するページ、リンク、サブメニューを選択します。次に、「レイアウト」アイコン  をクリックして、メニューアイテムとサブメニューの矢印の配置を変更します。

要素設定パネルで「デザイン」アイコン  をクリックして、訪問者がメニューアイテムを選択したときの「通常時」と「クリック」の 2つの状態のメニューをデザインします。

ハンバーガーメニューのコンテナはマスターセクションとみなされます。つまり、サイトごとに 1つのハンバーガーメニューしか作成できません。ただし、カスタム縦型メニューを表示するライトボックスを追加することで、同様の効果を得ることができます。

詳細は以下のオプションから選択してください。