[cssメニュー]マウスオーバーで滑らかに別要素をドロップダウンさせるjQuery・Fluid Navigation

Ads

最近存在を知ったのでメモ。
1ヶ月も前の情報ですけど、
今更ながらなかなか良さそう
なプラグインです。cssメニュー
でのマウスオーバーで使う
jQueryプラグイン。

デモを見ていただいたほうが早そうですね。マウスオーバー時にリスト内に書いたdiv要素に切り替えつつドロップダウンさせるjQuery。なんとなく説明が難しい。。。

Fluid Navigation

css-jquery01
マウスを乗せると別の要素が滑らかに降りてきます。デモは画像不使用です。なかなか良いのでは。

IE6~8も動く事は動きますが、若干挙動が怪しい。。

[sexy-lightbox href=’/wp-content/demo/fluid-menu/fluid-menu.html?TB_iframe=true&height=650&width=900′ title=’Fluid Navigationデモ’]デモをご用意しました。[/sexy-lightbox]

中には画像を入れることも可能です。これは色々と装飾も出来そうですね。cssもHTMLもシンプル。

<div id="menuBarHolder">
<ul id="menuBar">
<li class="firstchild"><a href="javascript:#">メニュー1</a>
<div class="menuInfo">メニュー1へのマウスーバー時に表示する部分</div></li>
<li><a href="javascript:#">メニュー2</a>
<div class="menuInfo">メニュー2へのマウスーバー時に表示する部分</div></li>

・・・

<li><a href="javascript:#">メニュー~</a>
<div class="menuInfo">メニュー~へのマウスーバー時に表示する部分</div></li>
</ul>
</div>
</div>

ダウンロードは以下より可能です。

Fluid Navigation