ドロップダウンメニュー

ハウツーガイド すべてのプラン 4 分で読めます

About > Our story、Contact、FAQ のような短いリストには、ドロップダウン（フライアウト）メニューを使用します。Shoes > Sneakers > Running のように、複数の階層にも対応しています。

ドロップダウンを追加する

1. テンプレートを選ぶ

   エディターの 要素 ツリーで、まだサブメニューがないトップレベルの項目の下にある サブメニューを追加 をクリックします。ドロップダウンメニュー（フライアウトメニュー） にカーソルを合わせ、縦型ドロップダウン または 横型ドロップダウン の 選択 をクリックします。

   

   2つのドロップダウンテンプレート。どちらもサンプルの項目が追加され、名前を変更できます。

2. 子項目を編集する

   サンプルの項目にカーソルを合わせ、項目を編集 をクリックして、タイトル と リンク を変更します。アイコン、画像アイコン、説明、バッジ、表示設定 については、メニュー項目を編集するをご覧ください。

3. 項目と階層を追加する

   項目を追加 をクリックすると、同じ階層に項目を追加できます。項目の下の ドロップダウンを追加 をクリックすると、その項目専用のさらに深いリストを作成できます。

4. 保存して公開する

   保存、続いて 公開 をクリックします。

テンプレート

縦型ドロップダウン

メニュー項目の下に、項目が縦に並びます。さらに深い階層は横に展開します。

横型ドロップダウン

メニューバーの下に、項目が全幅で横一列に表示されます。さらに深い階層は、下に新しい行として開きます。

ドロップダウンの設定

親項目にカーソルを合わせ、項目を編集 をクリックして サブメニュー までスクロールします。レイアウトを変更するために、ドロップダウンを作り直す必要はありません。

種類

縦型ドロップダウン または 横型ドロップダウン。なし にすると、項目は保持したままドロップダウンがオフになります。

幅と配置

縦型ドロップダウンのみ。項目の下で 中央、左、右 を選びます。横型ドロップダウンは常に全幅を使用します。

高さと配置

縦型ドロップダウンで 幅と配置 の代わりに表示されます。中央、上、下 から選びます。

変更または削除する

• 一時停止する — 種類 を なし にします。項目は保持されます。
• テンプレートを切り替える — 種類 を なし にしてから、もう一度 サブメニューを追加 をクリックします。
• 項目を削除する — 項目にカーソルを合わせ、項目を削除 をクリックします。
• 階層は浅く保つ — 多くても3階層程度にします。階層が深いメニューは、モバイルでは使いにくくなります。
• ラベルを使う — リンクのない項目は、その項目自体のリストを開くだけです。
• 画像や列が必要な場合 は、メガメニューを使用します。

トラブルシューティング

ストアフロントでドロップダウンが開かない

種類 が なし になっていないこと、ドロップダウンに少なくとも1つの項目があること、保存 と 公開 をクリックしたことを確認してください。テーマの問題については、ストアにメニューが表示されないのはなぜですか？をご覧ください。

関連ページ

• サブメニュードロップダウン、メガメニュー、タブメニュー、Masonryレイアウトを比較し、各項目に適したサブメニューを選びます。
• メガメニューリンクリスト、画像、商品、お問い合わせフォームなどのブロックから、幅の広いサブメニューパネルを作成します。
• メニュー項目を編集する項目のタイトル、リンク、アイコン、色、バッジ、サブメニュー、表示設定を変更したり、項目を複製、移動、削除したりします。

このページは役に立ちましたか？

問題を報告