Wix Studio エディタ：メガメニューを追加・カスタマイズする
読了時間：3分
メガメニューとは、横型メニューに追加できるコンテナのことを指します。訪問者が該当するメニューアイテムにマウスオーバーすると、追加したコンテナが表示されます。コンテナは始めからデザインして、ナビゲーションメニューや特集商品の紹介、またはその他の用途に自由に使用することができます。
備考：
メガメニューコンテナは、横型メニューにのみ追加することができます。縦型メニュー、アンカーメニュー、ハンバーガーメニューには対応していません。
この記事では、以下の項目について説明します：
メガメニューを追加・設定する
まず、既存のメニューに、アイテムとしてメガメニューコンテナを追加し、「サービス」や「当ショップについて」など、用途に応じた名前を入力します。
コンテナを追加して名前を設定したら、ボタン、シェイプ、テキストなどの要素を追加し、コンテナ内のコンテンツを構築します。
メガメニューを追加する方法：
- エディタで該当する横型メニューを選択します。
- 「メニューを管理」をクリックします。
- パネル下部の「＋アイテムを追加」をクリックします。
- 「メガメニュー」を選択します。
- メガメニューに名前を入力します。
ヒント：訪問者は、この名前にマウスオーバーしてメガメニューを表示します。 - キーボードの Enter キーを押して確定します。
- メガメニューにコンテンツを追加します：
- （「メニューを管理」パネルで）「コンテナ」横の「編集」をクリックします。
- コンテナに必要な要素を追加します。
メガメニューのレイアウトを調整する
メガメニューに必要な要素を追加したら、ページの構造に合わせてレイアウトを変更します。コンテナをどれくらい引き延ばすかを設定したり、余白や間隔を調整することができます。
メガメニューのレイアウトを調整する方法：
- エディタで該当するメニューを選択します。
- 「レイアウト」アイコン
をクリックします。 - 「メガメニュー」タブをクリックします。
- オプションを使用してレイアウトを調整します：
- コンテナをストレッチ：コンテナを訪問者の画面の幅いっぱいに引き延ばすかどうかを決定します。無効にした場合は、キャンバス上または要素設定パネルで希望の幅を設定することができます。
- 余白：画面の端からメガメニューコンテナの間に、ピクセルまたはパーセント単位で余白を追加します。
- アイテムとコンテナの間隔：スライダーをドラッグして、メニューとメガメニューコンテナ間の間隔を調整します。
メガメニューをデザインする
コンテナのレイアウトを調整したら、枠線や背景などをデザインします。メガメニューに加えた変更は、外観を維持するために、追加したサブメニューにも適用されます。
メガメニューをデザインする方法：
- エディタで該当するメニューを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。
- 「何をデザインしたいですか？」下のドロップダウンから、「サブメニューコンテナ」を選択します。
- 利用可能なオプションを使用してコンテナをデザインします：
- 背景の塗りつぶし：コンテナの背景の色、グラデーション、または画像を設定します。背景には、不透明度の異なる複数のレイヤーを追加することができます。
- 枠線：コンテナに枠線を追加して編集します。
- 角：コンテナの角の丸みを調整します。
- 影：コンテナの後ろに影を追加して、立体的に見えるようにします。
お役に立ちましたか？
|