手軽に導入しやすい特徴的な14のドロップダウンメニューサンプル

CSS、jQuery、MooTools、JavaScript

WEBサイトのメニューはシンプルであるべきと考えます。大規模なWEBサイトでは、ドロップダウンメニューを設置することで、ユーザーが容易に移動できるようになる。時にそれらの設置が難しい時は以下を開いてみると良い。
14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger

14ある中で今回触った感触としてお勧めが5つ。

現れ方がカッコいいドロップダウンメニュー
ClarkLab ? Animated Drop Down Menu with jQuery

サンプルデモをみるとわかりますが、ムヨンとでてきます。また、リンクも文字が少し大きくなる事で、リンクとわかり易いのが特徴的ですね。




展開後の表示が自由なレイアウトパネル
Make a Mega Drop-Down Menu with jQuery

jQueryが必要となる。
ドロップダウンメニューというより、クリックダウンパネルといってもいい感じのもの。
ダウンメニューがリストではなく、ある程度自由に表示できるのが特徴的。
サンプルはこちら。




シンプルで導入も楽なメニュー
Simple Drop Down Menu for jQuery

jQueryが必要となる。
シンプルながらちょっとカッコいいミニアイコン付きの多段メニュー。
サンプルコードは多数掲載されており、横メニュー以外に、縦メニューも可能となっています。




小さいスペースで色々案内できるメニュー
Simple CSS vertical menu Digg-like

非常にシンプルな形。
ジャンプフォームみたいなものですが、小さいスペースで色々と案内が出来そうです。




表示のされかたがクールな多段メニュー
MooTools Drop Down Menu! - Unobstrusive Moo Tools Menu (Falls back to a standard css drop down menu)!

MooToolsが必要。
ただサンプルを触らないとわからないのですが、現れ方がちょっとカッコいいです。
半透明なのもクールですね。


その他にも色々とよさげの物が豊富。
.
お試しあれ。
14 Easy to Implement Drop Down Menu Solutions

参照
MooTools - a compact javascript framework
jQuery: The Write Less, Do More, JavaScript Library
jQuery 1.3.2 日本語リファレンス

それでは。また。

up情報
タイトル「手軽にに導入しやすい特徴的な14のドロップダウンメニューサンプル」を「手軽に導入しやすい特徴的な14のドロップダウンメニューサンプル」に修正。