web-dev-qa-db-ja.com

レスポンシブデザイン-3レベルのナビゲーション

私は現在、非常に複雑な情報アーキテクチャを備えたサイトで作業しています。 IAには3つのレベルがあり、各レベルには最大12の項目を含めることができます。

  • レベル1:4アイテム
  • レベル2:最大12アイテム
  • レベル3:最大9アイテム

デスクトップでは、メガドロップダウン(例: Mashable )を使用しており、これを小さな画面やモバイルに適合させる必要があります。私は現在概念を調査していて、この例を見つけました: Multi-Level Push Men

この問題をどのように解決し、どのパターンを使用しますか?

3
Leo

考慮すべき別のパターンは、ここに示すように、マルチステップのトグルです: http://codepen.io/bradfrost/full/qwJvF 優れた これはResponsive リソースです。別の興味深いアイデアは、サブナビゲーションを完全にスキップすることです。

私もこの問題を監視するよう努めてきたので、おそらくこれらはあなたに関係があるでしょう:

本当に、あなたが選択したものは何でも、ユーザビリティテスト/廊下テスト/あなたができる余裕のあるものによって知らされるべきです。

別れの思想:「 Obviousが常に勝つ

enter image description here

1

jazZRoは私のキーボードから単語を取り除きました。私は、Mashableがレスポンシブビューで何をしているかを見て、ソリューションが何かを確認することを提案しました。

私は最近Apple( http://www.Apple.com/ )が行った賢い代替案を見つけました-モバイルデバイスでこれを開いて、それを適切に表示します-彼らはまだすべてのトップレベルのアイテムを保持していますが、ナビを再構築する必要なしにそれらをすべて回転させることができます。

高レベルの代わりに、ラグビーワールドカップのサイトでは折りたたみ可能なサイドバーを使用します(Microsoft Azureでは、各アイテムがその隣に別のアイテムを開くナビゲーションにこれを使用しています)Microsoft Azure

彼らの議論は、ユーザーがナビゲーションに焦点を合わせているときに、ページの残りの部分の重要性が低くなるという説明に当てはまると思います。

1
J4G