web-dev-qa-db-ja.com

レスポンシブセカンダリメニュー

以下のスクリーンショットのようなレイアウトがあります。 Twitterを使用して上部ナビゲーションが折りたたまれる場所Bootstrapナビゲーションが折りたたまれています。また、ナビゲーションに重要な左側のナビゲーションバーの下にセカンダリメニューがあります。

タブレットと電話サイズの画面に同じものを渡すための最良の方法はどれですか？

screenshot

navigationresponsive-designcollapsible-panels
11
Harsha M V

この「難問」について私がこれまで考えたことがないのは驚くべきことですが、興味深いことです。私が思いつく可能性のある解決策は次のとおりです：

2つのメニューボタン
私の最初の考えは、サブナビゲーションをキャンバスの左に置くことでした。メインナビゲーションのドロップダウンメニューの右側にあるメニューボタンと、キャンバス外のサブナビゲーションの左側にあるメニューボタンを使用できます。しかし、それが全体の問題です。少なくとも混乱を招く2つの異なるメニュースタイルが残ります。これは、セカンダリヘッダーと別のドロップダウンメニューで解決できます。

マージナビゲーション
私の2番目の考えは、2つのナビゲーションをマージすることでした。これは、メインナビゲーションに親リンクがあり、サブナビゲーションにすべての子リンクがある明確な階層がある場合に行うことができます。構造は次のようになります。

Dashboard
    Account
    Subscription
    Billing information
    Account members
    Careers page
    etc.
Candidates
Agenda
Reports
Activity

これは、サブナビゲーションのリンクがメインナビゲーションのリンクと関係がない場合は機能しません。ただし、これは私の選択であり、ナビゲーション構造を修正することさえアドバイスします。

サブナビゲーションを表示したままにします
私が考えることができる最後の解決策は、サブナビゲーションをページに表示したままにして、それを水平の小さなナビゲーションに変更することです。これにより、コンテンツとメインメニューのメインヘッダーとの距離が離れるので、好ましくない場合があります。

ここにいくつかのさらなる読書があります：
セカンダリナビゲーションのレスポンシブデザインパターン-ユーザーを圧迫しない方法はありますか？
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/

8
Paul van den Dool

1つの解決策は、現在計画しているように、プライマリナビゲーションを折りたたみ、セカンダリナビゲーションアイテムを単純にスタックすることです。

enter image description here

このアプローチの理由は、テキスト入力、ドロップダウン、保存など、それらのほとんどの項目に関連する多数のアクションがあるためです。ユーザーが一度に1つのことに集中するようにします。

3
jnmnrd