FAQ
質問1: Desktop Mega Menuが2行目に折り返すのを防ぐにはどうすればいいですか？
Desktop Mega Menuのレイアウトを崩す可能性がある2つの状況があります。トップレベルアイテムが多すぎるか、標準的なデスクトップより狭いウィンドウでサイトが表示されている場合です。Setting → Layout → Desktopの下にある2つの設定がこれを修正します——コード不要です。
Menu overflow navigation
Show navigation arrows when menu overflowsをオンにします。トップレベルバーは常に1行のままで、収まらないアイテムは折り返されるのではなく、›矢印ボタンの後ろに隠されます。Button background colorとArrow icon colorの2つの色フィールドを使うと、ボタンをスタイルできます。
Mobile switch breakpoint
デフォルトでは、768pxより狭い画面はデスクトップレイアウト用のスペースがまだ十分にあってもモバイルモードに切り替わります——タブレットやサイズ変更されたブラウザウィンドウでよくあります。Breakpoint (px)フィールドを下げて、より狭い幅までデスクトップバーを表示させます。
新しく開かれた範囲（ブレークポイントと768pxの間）は標準的なデスクトップより狭いため、その範囲でトップレベルアイテムが折り返されないよう、Menu overflow navigationもオンにしてください。
例：ブレークポイント = 600でMenu overflow navigationがオンの場合：
| 画面幅 | 動作 |
|---|---|
| 600px未満 | モバイル/ハンバーガーメニュー |
| 600px – 768px | Desktop Mega Menu、矢印ボタンがアイテムを1行に保つ |
| 768px以上 | Desktop Mega Menu、標準的な動作 |
これら2つの設定は独立しており、Desktop Mega Menuにのみ影響します——TabBar、FAB、Slide menu、Mobile Mega Menuには影響しません。
質問2: Desktop Mega Menuをモバイル上でSlide menuとして表示するにはどうすればいいですか？
時々、古典的なレスポンシブアプローチが必要です。1つのDesktop Mega Menuを構築し、モバイルで自動的にSlide（Hamburger）メニューに折りたたまれるようにします——最初からモバイル用の別のメニューを構築する代わりに。
メンテナンスするメニューは1つだけです——デスクトップバージョンです。モバイルコピーは自動的に従い、同期を保つための2番目のツリーはありません。
モバイルファーストは今日のナビゲーション設計の方法です——携帯電話はほとんどのアクセスをもたらし、多くの場合、最も多くの収益をもたらします。広いデスクトップバーから絞られたツリーは本当にデスクトップファーストです。リンクあたりのタップが多すぎる、スタックされたリストとして読まれるドロップダウンスタイルのグループ、モバイル専用のショートカット用のスペースがありません。
ストアのメインナビゲーションでは、最初からモバイル用に設計されたメニュー——専用のSlide、Grid、またはTabBarメニュー——は通常、余分なメンテナンスの価値があります。
中間的な方法：
Smart responsiveを使用してDesktop Mega MenuをSlide menuにミラーリングし（以下の手順）、それを直接開くTabBarアイテムを追加します。アイテムのLink Toフィールドをopen:NaviMenu(SF-xxxxxxxxxx)に設定します（Business / Elite）——Slide menuの埋め込みIDを使用します——モバイル訪問者が非表示のハンバーガーアイコンの代わりに、実際の下部バーのエントリポイントを取得するようにします。
Smart responsiveをセットアップする
Desktop Mega Menu → Setting → Mobile → カードSmart responsiveを開きます。このメニューの生きたリファレンスをSlide menuに埋め込みます——ここのコンテンツのみを編集し続け、モバイルバージョンは自動的に更新されます。
Copy embed itemをクリックして、このメニューアイテムテンプレートをコピーします。- 既存のSlide menuの
level 1に貼り付けます——またはまだない場合は最初に1つを作成します。
マルチカラムレイアウトは自動的にフラット化されます。カラムが1つの垂直リストになり、カラムタイトルは削除され、別のカラムが使用されていた場所に区切り線が挿入されます——訪問者は2回ではなく1回のタップですべてのリンクに到達できます。
埋め込み後、カードはThis menu already shows on mobileとSlide menuへのリンクを表示するので、いつでもチェックできます。
モバイルコピーを微調整する
- デスクトップ専用アイテムを非表示にします。 Desktop Mega Menuのアイテムを開く →
Visibility→Exclude when embeddedをオンにします。デスクトップに留まり、モバイルコピーからのみ消えます。 - モバイル専用アイテムを追加します。 Slide menuはリファレンスが持ち込むものに限定されません——デスクトップバーが必要としないもの用に、埋め込まれたものの横に通常のレベル1アイテムを追加します。通話/WhatsAppボタン、営業時間、言語切り替え、またはテーマのヘッダーやフッターに通常存在するリンクなどです。これらはSlide menuに直接存在し、デスクトップバージョンには一切触れません。