web-dev-qa-db-ja.com

モバイルでのレスポンシブアプリケーションのドリルダウンナビゲーションの処理方法

私はレスポンシブWebアプリに取り組んでいます。さまざまな業種の概要を提供します。垂直ユーザーの詳細を表示するには、ドリルダウンできます。これまでのところ、ドリルダウンはレベル5まで続きます。垂直内でのドリルダウンのナビゲーションは、ブレッドクラムのバリエーションです。

さて、モバイルアプリでもWebアプリが正しく機能するように変更を加える必要があります。

StackExchangeで同様のものが見つかりました ブレッドクラムよりもモバイルでカテゴリをカスケードするより良い解決策はありますか?

しかし、さらに何かが必要です。また、変更をどのように進めればよいですか?

[編集1-追加された画像]

enter image description here

[編集2-可能な解決策が追加されました]パンくずメニューは合理的なオプションのようです。 Possible Solution

3
Sumi

あなたがする必要があるのは、それらをモバイルでアクセス可能なままにしながら、パンくずリストを隠すことです。興味があると思われるパターンは3つあります。

  1. 前のレベルのみを表示します。レスポンシブな例を次に示します: http://codepen.io/bradfrost/full/dKulf

  2. ブレッドクラムをドロップダウンとして表示します。応答例: http://codepen.io/bradfrost/full/DCgax

  3. それらを倒す-最もエレガントではない方法ですが、一部のプロジェクト固有の状況では便利な場合があります。そして例をもう一度: http://codepen.io/bradfrost/full/IcoL

(ブラウザウィンドウのサイズを変更して、例がどのように機能するかを確認してください。)

最初の2つを常に最初のレベルを表示することと組み合わせることができます(ユーザーがトップレベルに簡単にアクセスできるようにするため)。次に例を示します。

  • [トップレベル] [ドロップダウン]
  • [トップレベル] ... [前のレベル]

これは、ユーザーが一番上に1レベル上に行きたいと思うことがほとんどだと思うからです。ただし、これはプロジェクト固有の場合もあります。

5
Dominik Oslizlo