web-dev-qa-db-ja.com

モバイルでサブメニューを表示するには?

開発中のモバイルサイトにナビゲーションメニューがあります。親とサブメニューを区別する最良の方法は何でしょうか。サブメニューはいつまでも続くことがあるので、どんなに複雑であっても、階層全体を区別する必要があります。色を暗くしようかと思っていたのですが、そうなると黒になるまで暗くなってしまいます。また、ドロップダウンのレベルがどれほど深いかに関係なく、CSSでそれを実装する方法がわからないため、自動的に暗くなります。

これは、理解を深めるのに役立つ画像です: enter image description here

3
yaharga

サブメニューを回避する方法がない場合は、レベル間の視覚的な違いを明確にし、サブメニューが対応するメインメニューを明確にすることが重要です。おそらく100万通りの方法でそれを行うことができますが、最も一般的な傾向は以下の変更を伴う傾向があります。

  • インデント
  • フォントサイズ、太さ、またはファミリ
  • 間隔/区切り文字
  • ケーシング

上記の例では、変更が微妙すぎて、メニュー階層を明確に示すことができません。上記のアプローチの組み合わせを使用して、レベルをより明確に区別する例を次に示します。

example

さて、この例は無限に拡張可能ではありませんが、適切に設計された情報アーキテクチャは、実際にはこれ以上の階層を必要としないはずです。

2
dekaliber

この記事では、最も一般的なモバイルナビゲーションパターンの概要を説明し、シナリオに適したナビゲーションアプローチを選択するのに役立ちます。

https://www.nngroup.com/articles/mobile-navigation-patterns/

1
Vasil Yordanov

サブカテゴリが各カテゴリで2つ以下の場合は、カテゴリをタイトルとして配置して、前もって表示します。このようにして、ユーザーを混乱させたり、情報を隠したりしません。しかし、サブカテゴリを持つカテゴリがさらにある場合は、IAに関する回避策を見つける必要があります。

1
mimundo