jQueryによる美しいマウスオーバーメニュー 10個

jQueryの素敵なナビゲーションの紹介です。
最近、ちょくちょく僕も触ってるんですが、こういったデモ有りの実装例は貴重ですね。
ソース見るだけでかなり、参考になります。

1.Circular Motion Effect
メニュー項目にマウスを合わせると、クルクルと小さな円が現れる。あと背景も変わる。可愛い雰囲気。


2.Rocking & Rolling Rounded Menu
アイコンにマウスを合わせると、横ににょーーって伸びる。かなりかっこ良い。デモは伸びる速度がゆっくりすぎると感じたので調整要かな

3.Fixed Slide Out Navigation
上からぶら下がってるタブにマウスを合わせると、下にニューっとでてくる。コンパクトで使いやすそう。

4.Drop Down Mega Menu
これは静止画だとまったく伝わらない。メニューにカーソルを合わせると、ぽんぽぽんって…。物理計算された動きチックというか…Demo見て

5.Scrolled Link Navigation
アンカーと連動したもので、メニューの効果自体は色が変わるだけだけど、スクロールさせるとメニューも追従してくれる。Demoでホイールをグリグリして試してください。

6.Advanced CSS Menu
マウスオーバーすると手書きの可愛い説明が現れる。

7.Bottom Side Out
マウスオーバーすると下からモコモコっと、アイコンとともにせり上がってくる。アイコンと上がる速度が違ったりと、結構凝ってる。

8.MB Menu
クリックしなきゃならないぽいけど、3番目のやつと似てるうごきかな。Windowsアプリのメニューバー的だなと感じました。

9.Wander Wall
とにかくゴー☆ジャス。上の額縁みたいなのにマウスを当てると、部屋の模様替えみたいにページ全体が変わります。使いどころは難しそうですが、面白い効果です。

10.Bubble Navigation
名前の通り、バブル(泡)をモチーフにしたメニュー。マウスオーバーすると円が広がり、サブメニューが現れます。ゆっくりしぼんでいくのが可愛い。

結言:マウスオーバー系はスクリーンショットがめんどくさい

0 件のコメント:

コメントを投稿