web-dev-qa-db-ja.com

Amazon、NewEgg、LightInTheBoxで使用されるサイドバーナビゲーションのデザインパターンは何ですか?

現在Amazon、LightInTheBox、NewEggで使用されている以下のナビゲーション例をご覧ください。パターンとは何ですか?サイドバーメニューのトップカテゴリのいずれかにマウスを合わせると、サブカテゴリを含むコンテンツがスライドアウトします。

効果を達成するために使用できるテンプレートはありますか?または、使用可能なCSSサンプルはありますか?

AmazonLightInTheBoxNewEgg

5
tom

それらはvertical mega-menusと呼ばれます。

このパターンに関するJakob Nielsenの2つの記事を次に示します。

大きな2次元のドロップダウンパネルは、ナビゲーションオプションをグループ化してスクロールを排除し、タイポグラフィ、アイコン、ツールチップを使用してユーザーの選択を説明します。

http://www.nngroup.com/articles/mega-menus-work-well/

大きな2Dドロップダウンは、適切に設計されていれば、サイトナビゲーションを容易にすることができます。 2つの例は、メガメニューのユーザビリティの落とし穴を示しています。

ここにCSSフレームワークの例があります:

http://shanejeffers.com/blog/megadrop-mega-drop-down-menu-css-framework

10
Gildas Frémont