jQueryの素敵なナビゲーションの紹介です。
最近、ちょくちょく僕も触ってるんですが、こういったデモ有りの実装例は貴重ですね。
ソース見るだけでかなり、参考になります。
1.Circular Motion Effect
メニュー項目にマウスを合わせると、クルクルと小さな円が現れる。あと背景も変わる。可愛い雰囲気。
2.Rocking & Rolling Rounded Menu
3.Fixed Slide Out Navigation
4.Drop Down Mega Menu
5.Scrolled Link Navigation
6.Advanced CSS Menu
7.Bottom Side Out
8.MB Menu
9.Wander Wall
10.Bubble Navigation
結言：マウスオーバー系はスクリーンショットがめんどくさい
最近、ちょくちょく僕も触ってるんですが、こういったデモ有りの実装例は貴重ですね。
ソース見るだけでかなり、参考になります。
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
クリックしなきゃならないぽいけど、３番目のやつと似てるうごきかな。Windowsアプリのメニューバー的だなと感じました。
9.Wander Wall
とにかくゴー☆ジャス。上の額縁みたいなのにマウスを当てると、部屋の模様替えみたいにページ全体が変わります。使いどころは難しそうですが、面白い効果です。
10.Bubble Navigation
名前の通り、バブル（泡）をモチーフにしたメニュー。マウスオーバーすると円が広がり、サブメニューが現れます。ゆっくりしぼんでいくのが可愛い。
コメント
コメントを投稿