[JS]ユーザビリティに配慮したドロップダウン型のナビゲーションを実装するチュートリアル

デザインも秀逸ながら、ユーザビリティに配慮して大量の項目を掲載するドロップダウン型のナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。

Mega Drop Down Menus w/ CSS & jQuery
demo

ユーザビリティで配慮したポイントは、ホバー時にドロップダウンが表示されるタイミングとのことです。
この微妙なタイミングのずれは、jQueryのプラグイン「hoverIntent」で実装されています。

また、ドロップダウンされる各子階層は異なるカラム数のレイアウトに対応しており、全てリスト要素で実装されています。

異なるカラムで実装可能