モバイルでサブメニューを表示するには？
開発中のモバイルサイトにナビゲーションメニューがあります。親とサブメニューを区別する最良の方法は何でしょうか。サブメニューはいつまでも続くことがあるので、どんなに複雑であっても、階層全体を区別する必要があります。色を暗くしようかと思っていたのですが、そうなると黒になるまで暗くなってしまいます。また、ドロップダウンのレベルがどれほど深いかに関係なく、CSSでそれを実装する方法がわからないため、自動的に暗くなります。
これは、理解を深めるのに役立つ画像です： 
サブメニューを回避する方法がない場合は、レベル間の視覚的な違いを明確にし、サブメニューが対応するメインメニューを明確にすることが重要です。おそらく100万通りの方法でそれを行うことができますが、最も一般的な傾向は以下の変更を伴う傾向があります。
- インデント
- 色
- フォントサイズ、太さ、またはファミリ
- 間隔/区切り文字
- ケーシング
上記の例では、変更が微妙すぎて、メニュー階層を明確に示すことができません。上記のアプローチの組み合わせを使用して、レベルをより明確に区別する例を次に示します。
さて、この例は無限に拡張可能ではありませんが、適切に設計された情報アーキテクチャは、実際にはこれ以上の階層を必要としないはずです。
この記事では、最も一般的なモバイルナビゲーションパターンの概要を説明し、シナリオに適したナビゲーションアプローチを選択するのに役立ちます。
https://www.nngroup.com/articles/mobile-navigation-patterns/
サブカテゴリが各カテゴリで2つ以下の場合は、カテゴリをタイトルとして配置して、前もって表示します。このようにして、ユーザーを混乱させたり、情報を隠したりしません。しかし、サブカテゴリを持つカテゴリがさらにある場合は、IAに関する回避策を見つける必要があります。