jQuery Flower Navigation | jQuery Plugins

カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flower Navigation」。
何の変哲もない円形のボタン。



クリックすると円の内側から画像がワサッとアニメーションでメニューが現れます。



カーソルを合わせると止まります。



マークアップは次のように書かれています。
デモではクリックしても飛べませんが、aタグのhrefを指定してあげれば飛べるということが分かりますね。

<nav id="websites"> 
    <ul> 
        <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/mdm_small.jpg"/></a></li> 
        <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/rentahost_small.jpg"/></a></li> 
        <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/spinoff_small.jpg"/></a></li> 
        <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/goatrance_small.jpg"/></a></li> 
        <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/sgc_small.jpg"/></a></li> 
        <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/avaloq_small.jpg"/></a></li> 
        <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/pkcity_small.jpg"/></a></li> 
        <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/prounix_small.jpg"/></a></li> 
        <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/sgc_small.jpg"/></a></li> 
        <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/avaloq_small.jpg"/></a></li> 
        <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/pkcity_small.jpg"/></a></li> 
        <li><a href="#"><img src="http://soma.urlich.ch/_media/internet/prounix_small.jpg"/></a></li> 
    </ul> 
    <a class="navbutton">Webdesign</a> 
</nav> 

ちょっといつもと違うナビゲーションで個性を出したいなんて時に使えるのではないでしょうか。

関連エントリ

• ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集
• ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集
• jQueryをナイスにナビゲーションに活用したサイト集
• 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。