先日に引き続きドロップダウンメニューネタ。

jQueryを使っての、通常のドロップダウンメニューから、
ユーザビリティに配慮して作られたメガドロップダウンメニュー
「Mega Drop Down Menus w/ CSS & jQuery」が興味深かったのでご紹介

MegaDropDownMenu.jpg
Mega Drop Down Menus w/ CSS & jQuery

大規模なサイトではドロップダウンは効果的な扱いになりますが、
いろいろと指摘されているユーザビリティ問題に対して、
新種のドロップダウンとしての試みのもよう。

実際のデモページはこちら
Mega Dropdown Menu by Soh Tanaka

ボタンにマウスホバーした際に、一瞬の間隔が空き、
フェードしてナビゲーションが表示されます。
ここがポイントのよう。

表示されたナビゲーションエリアも広くとってあるので、
操作性も悪くなく、リストがカテゴリごとに纏められていてユーザーに優しい感じがします。

このドロップダウンメニューが、どんなユーザーにとっても
使いやすいものかどうかは何とも言い切れませんが、
今までの見た目や動き(演出)から、
若干の違いだったとしてもユーザーに配慮したインターフェースを追求していくことは
とても共感できます。

最近では、ページフッターにサイト内のメニューを
サイトマップの様に並べているサイトを良く見かけますが、
このメガドロップダウンメニューの様な形でサイトマップ代わりの
インターフェースを組んでみるのもいいかもしれません。

ご参考までに。。。

BlackFlag
FOLLOW

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryメガドロップダウンメニュー

Categories
BlackFlag are . . .
都内で活動するマークアップエンジニアによる、 Webサイト構築に関する技術やWebサービスを紹介するブログです。

jQueryをはじめとしたWebサイトを彩る技術のほか、
HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、
Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。

About BlackFlag
BlackFlag Information
FriendshipLinks