jQuery Radmenu Example

回転する円形のサイトメニューが実装できるjQueryプラグイン「jQuery Radmenu」。
UIとしては次のような円形のメニューで、回転させるとなかなか面白い動きをします。

具体的にどう使うか、というのはアイデア次第ということになってきそうですが、アイテムをシャッフルさせたり、動きがなかなか面白いメニューになっています。


デモページ

利用者にちょっとした驚きの効果を与える分には申し分ないですが、使い方には注意が必要かもしれませんね。

HTML的には、次のようなulを使ったリストです。

<div id='radial_container'>
  <ul class='list'>
    <li class='item'><div class='my_class'>0</div></li> 
    <li class='item'><div class='my_class'>1</div></li> 
    <li class='item'><div class='my_class'>2</div></li> 
    <li class='item'><div class='my_class'>3</div></li> 
    <li class='item'><div class='my_class'>4</div></li> 
    <li class='item'><div class='my_class'>5</div></li> 
    <li class='item'><div class='my_class'>6</div></li> 
    <li class='item'><div class='my_class'>7</div></li> 
    <li class='item'><div class='my_class'>8</div></li> 
    <li class='item'><div class='my_class'>9</div></li> 
  </ul>
</div>

関連エントリ

• ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」
• ドロップダウンメニューのデザインネタ帳
• ビローンと伸びるドロップダウンメニュー実装jQueryサンプル