タッチスクリーン/モバイルデバイスでのサイトナビゲーションのドロップダウンメニューに代わる優れた方法は何ですか？
現在、ウェブサイトのデザインを変更中です。デザインの目標の1つは、サイトをよりモバイル/タブレット対応にすることです。
現在のサイトは非常に大きく、ナビゲーションはやや複雑です。現在、メインナビゲーションは8つのドロップダウンメニューに分かれており、マウスを上に置くと展開されます。各メニューには5〜10の項目があります。
サイトのデザインを変更すると、構成が異なる場合がありますが、ナビゲーションアイテムの数はほぼ同じになります。ただし、既存のナビゲーション形式を維持することは望ましくないと思います。 「ホバリング」はタッチスクリーンデバイスでは問題になる可能性があり、メニューがドロップダウンする長い水平ナビゲーションバーは、スマートフォンの画面に水平に収まるように非常に小さくする必要があります。一方、リンクやボタンの単純なリストも、非表示にしたり、展開したり折りたたんだりする方法がないと多すぎるため、望ましくありません。
また、レスポンシブデザイン（CSSメディアクエリを使用）を使用してサイトをデスクトップブラウザーとモバイルブラウザーの両方に適合させることも目的としているため、両方の環境で共有コードを使用できるソリューションが理想的です。 「デスクトップ」と「モバイル」のサイトを分けないようにしています。
私はこれをどのように処理できるかについていくつかのアイデアを持っていますが、自分のアイデアが好きかどうかはわかりません。だから私の質問は ナビゲーションが複雑なサイトのプルダウンメニューに代わる、タッチスクリーン対応でモバイル対応の優れた方法は何ですか。 そのようなナビゲーション方法をうまく実装しているサイトの例も非常に高く評価されます。
インデックスページでコンテンツを繰り返して、サブナビゲーションを適切に低下させるか、ドロップします。
それは本当です。以下の証拠を見てください。レスポンシブウェブデザインの2つの優れた例は、 Smashing Magazine と The Boston Globe です。 Ethan Marcotte 彼自身はボストングローブの再設計に関与していました。
Smashing Magazine：Drop the Subnav
これらのスクリーンショットでは、デスクトップからモバイルフォームファクターに進むにつれて、「サブナビゲーション」が完全に消えていることに注意してください。これは常にページのインラインで繰り返されるため、技術的に冗長です。サブナビゲーションをインデックスページに移動することを検討してください。
デスクトップフォームファクタ
タブレット（ish）フォームファクター
モバイルフォームファクタ
The Boston Globe：Degrade Subnavigation
この例では、ボストングローブナビゲーションは、堅牢でデスクトップ上での優れたメガサブナビゲーションから、タブレットフォームファクターのより控えめなサブナビゲーションに移行することに注意してください。また、ロールオーバー（マウスポインターでのみ可能）から拡張クリック（タッチデバイスに必要）に移行することにも注意してください。ナビゲーションはモバイルではさらに崩れます。
また、サブナビゲーションのアイテムは、インデックスページにもインラインで表示されることに注意してください。この場合、ニュースは国家、政治などに分類されます。これらはメガサブナビゲーションとページで見つけることができます。
デスクトップフォームファクタ
タブレット（ish）フォームファクター
タブレット（ish）フォームファクター（ナビゲーション展開）
モバイルフォームファクタ
