メニューアイテムがたくさんあるレスポンシブメニュー
モバイルではトップレベルのメニューアイテム（x8）のみを表示するレスポンシブメニューがありますが、デスクトップでは、親メニューアイテム内にサービスエリアのあるホバードロップダウンも表示されます。
問題は、そのエリア内の実際のサービスで別のレベルのナビゲーションを表示する機能が必要なことです。
ここにリンクがあります： http://www.irwinmitchell.com
シナリオ例は次のとおりです。
Personal Legal Services
> Administrative & Public Law
- Disability Law
- Education Litigation
- Prison Law
- Professional Regulation and Discipline
- Social & Healthcare Law
そのため、メインナビゲーション内のすべての到達圏に対して、このような構造を表示する必要があります。
誰かが以前にこの問題を提示されたことがありますか、またはナビゲーションにさらにサブカテゴリを表示するための最も便利な方法は何か考えがありますか？
他の人が指摘しているように、あなたは巨大なメニューを持っています、そしてあなたがそれをどのようにスタイル付けしても、20のメニュー項目を読んで面倒にそれらに最適なものを見つけたくない顧客をおそらく失っています。
あなたがhaveに3レベルのメニューがあると仮定します：
mobileでは、スクロール可能なメニューリストを開くメニューリンクを使用できます。オプションをクリックすると、そのメニューオプションのセットが画面から左にスライドし、サブメニューオプションが別のスクロール可能なリストに表示されます。同じことを3番目のレベルで繰り返すことができます。このようなスクロールリストはモバイルでは非常に一般的であり、このエクスペリエンスは、作成できるデスクトップエクスペリエンスよりも優れており、より親しみやすいものです。
desktopでは、3レベルのナビゲーションは一般的ではありません。 Amazon、eBay、Microsoft、およびAppleのようなサイトが2レベルのナビゲーションのみでサイトを作成できる場合は、なぜそれができないのかを自問する必要があります。「行政および公法」は（新しいページへのリンクとして）それの子を新しいページに含めます。Apple.comで「Mac」をクリックすると、新しいページが表示され、基本的にサブカテゴリが表示されますただし、上部に大きなサムネイル画像とテキストが表示されます。これは、メニュー項目の上にサブメニュー項目の上にカーソルを置くよりも簡単で簡単に移動できます。
あなたが本当にデスクトップで3レベルのナビゲーションを実行する必要がある場合は、Amazonのようなものを実行できます。 '「家庭、個人法務、ビジネス法務、社員など」したがって、メインメニュー項目をクリックして、迅速なスキャンのために小さな行の高さの単一列リストを表示し、それらの1つにカーソルを合わせると、右側の別のサブメニューが展開されます。
マルチレベルのドロップダウンは、メニュー項目が多すぎるという問題に対する設計されたソリューションです。この問題に対する最善の解決策は、実際にはメニュー構造を単純化することです。本当に多くのメニュー項目が必要な場合は、サブメニューを使用してそれらを分割することをお勧めします。
私は複雑なナビゲーションをデパートのガイドのように考えるのが好きです。ストア内のすべてのアイテムのリストが表示されることはありません。中に入ると、トップレベルのナビゲーションのみが表示されます。メンズウェア、家電、家具など。そのセクションに移動すると、さらにカテゴリ内ナビゲーションが表示されます。シャツ、スーツ、ズボンなど.
このようなパターンを使用すると、適切な決定を行う前に、ユーザーが非常に迅速に正しい決定を行い、その後それらを調整して、everyオプションを処理する必要をなくすことができます。サイトの訪問者を簡単にし、考えさせないでください（多すぎる）。
これは、ツリーをトラバースする場合と同様に表示されます。各ノードで、子を表示するか、親に戻って兄弟を表示できます。このようにナビゲーションを表示すると、1つのページに第2レベルの深度を表示する必要がなくなります。全体的なナビゲーションスペースが徐々に明らかになるため、より多くのユーザークリックが必要になる可能性がありますが、小さなフォームファクターではうまく機能するはずです。私の短い答えは、それをサポートするスペースがないときは、階層メニューを表示すべきではないと思います。
ところで、私は他の誰かがこの質問に答えて、これを行う非常にエレガントな方法を示すことによって私が間違っていることを証明することを望んでいます。
下のリンクの「参照」メニューを見ると、各リストの下部に「もっと見る」リンクが表示されます。クリックすると、特定のセクションのすべてのリンクが表示されます。
同様のアプローチで子リンクを表示できるかどうか、おそらく引き出しトグルですか？
これからリリースする予定のUIフレームワークのドロップダウンとメガメニューのレスポンシブソリューションを作成しました。あなたの実装を見てきましたが、これが私自身の仕事に基づいて私が提案するものです：
- モバイルメニューバーをページの上部に移動します。修正する必要はありませんが、最上位のUI要素である必要があります。修正されている場合は、メニューの展開時にスクロールを許可しますが、閉じたときに修正に戻ります。
- メニューボタンを右に移動し、小さなバージョンのロゴをメニューバーの左側に追加します。検索を取り除くか、メニューに統合するか、またはメニューバーのボタンによってトリガーされる独自の拡張可能領域を指定します。
- 展開されたメニューの最初のビューはあなたが持っているものに似ているかもしれませんが、私はそれを100％の幅にし、矢印が下向きになるように90度回転させます。サブメニューのあるメニュー項目のみに矢印が必要です。
- サブメニューを切り替えるには、親メニュー項目にクリックイベントを追加します。サブメニューは少なくとも目に見えるようにインデントされている必要があり、異なる色を作るのに役立つ場合があります。
- デスクトップとモバイルのどちらにも複数のサブメニューレベルを設定することはお勧めしません。
- 一度に表示できるサブメニューは1つだけです。
これが私がやったことの例であり、以下に説明があります：
- 通常のデスクトップ機能。
- モバイルではメニューが折りたたまれ、メニューボタンに置き換わります。
- メニューボタンをクリックまたはタッチすると、メニューが展開されます。 （これらの3つの上にメニュー項目が多いため、メニューボタンは表示されません。）
- ドロップダウンメニュー項目をクリックまたはタッチすると、展開されます。