セカンダリナビゲーションのレスポンシブデザインパターン-ユーザーを圧迫しない方法はありますか？
小さな画面でユーザーに何らかのセカンダリナビゲーションを表示するための良い方法を見つけるのに苦労しています。大画面では、次のようになります。
（これは http://www.shopify.com/examples から取得されます）
しかし、小さな画面では、物事は本当にトリッキーになります。私はボタンを積み重ねたり、複数の列を使って実験しましたが、それは常にa）選択とコンテンツの間の接続を切断するようです（ユーザーが何かを選択し、8つのボタン、つまり画面を下にスワイプして約1.5変更）およびb）本当に乱雑になってユーザーを困らせます-リンクの大きなブロックがあります。
アコーディオンを使おうとすると、小さな災害が発生しました。変更やアニメーションを完全に表示するのに十分な画面がないため、事態は再び複雑になります。
現在、小さな歯車アイコンを表示することを考えています。これにより、ユーザーが選択できるオーバーレイメニューが開きます。スペースに関しては、これは良い解決策のように見えますが、メインメニューに加えて2番目の非表示メニューを導入するのが良いアイデアかどうかはわかりません（メインメニューに「ハンバーガー」パターンを使用しています）。
もう1つのアイデアは、「現在、おすすめのアイテムを表示しています」を大胆に表示し、ユーザーがそれをタップしたときにメニューに移行することですが、これが理想的かどうかはわかりません。
この問題を解決するパターンを知っていますか？私のアイデアはいくつかの既知の原則で破られますか？
すばらしい質問です。あなたにはいくつかの選択肢があり、私はあなたのために3つのバリエーションをスケッチしました。
バージョン1 –ドロップダウンメニュー
セカンダリナビゲーションを含むシンプルなドロップダウンメニューを使用します。
長所：
- 内容に近い
- スペースをほとんどとりません
短所
- 誰もがフィルターの意味を理解したり、フィルターが必要になる理由を理解したりするわけではありません。
バージョン2 –ハンバーガーメニュー
ハンバーガーメニューには、2次ナビゲーションと他のすべてのサイトリンクの両方が含まれています。
長所
- ナビゲーションに関連するものはすべて、サイトの1つのスペースにきちんと組み込まれ、ページがコンテンツに本当に集中できるようになっています。
短所：
- コンテンツを操作できることは明らかではない
バージョン3 –スクロール歯車
Apple Podcastアプリで見られるように、スクロールコグは、画面の多くを盗むことなく、いくつかのメニューオプションを直接公開します。
長所
- ユーザーにオプションを認識させるいくつかのセカンダリナビゲーションリンクを表示します。
短所
- 私が偶然見つけたモバイルブラウザーでの現在の実装は、すぐには反応しませんが、ソリューションをテストして最適化できる可能性があります。
何らかの形でパンくずリストを使用してコンテキストを表すことができますか？そのため、選択されたアイテムのみの完全なサブナビゲーションではありません。
そうしないと、コンテキスト内の別のアイコンと拡張可能なサブメニューが機能する可能性があります。この投稿（ ハンバーガーアイコン-メニューまたはドラッグアフォーダンス？ ）には、他のアイコンでのハンバーガーの使用例がいくつかあります
例：ハンバーガーは明らかにメインナビゲーション上にあり、セカンダリナビゲーションにはコンテキストナビゲーションを示す別のアイコンがあります。
