わさっ!っと広がるメニューを作れるjQueryプラグイン「jQuery Wheel Menu」

一時SNSアプリPathで話題になったメニューの表示方法をあなたのサイトにも。
ということで、クリックなどでわさっと格納されているメニューが広げて表示できるjQueryプラグインjQuery Wheel Menuです。

sponsors

使用方法

jQuery Wheel Menuからファイル一式をダウンロード。

<link href="wheelmenu.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="jquery.wheelmenu.js"></script>
<script type="text/javascript">
$(function(){
      $(".wheel-button").wheelmenu({
        trigger: "hover", //click" or "hover . Default: "click" どのアクションで開かせるか
        animation: "fly", //"fade" or "fly". Default: "fade" 表示方法
        animationSpeed: "fast", //"instant", "fast", "medium", or "slow". Default: "medium" スピード
        angle: "all" //"all", "N", "NE", "E", "SE", "S", "SW", "W", "NW", or even array [0, 360]. Default: "all" or [0, 360] 表示角度
      });
});
</script>
  
あとはメニューのHTMLを下記のように記述します。

      <a href="#wheel" class="wheel-button">
       <span>+</span>
      </a>
      <div class="pointer">Hover me</div>
      <ul id="wheel">
        <li class="item"><a href="#home">A</a></li>
        <li class="item"><a href="#home">B</a></li>
        <li class="item"><a href="#home">C</a></li>
        <li class="item"><a href="#home">D</a></li>
      </ul>
  
angleを360やallにしている時のメニュー数はある程度多くても問題ありませんが、NEなどにしている場合は4-5個にしておくほうが良いでしょう。
また、サンプルのようにメニューに装飾を加えると格好良く見えます。

サンプル

マウス乗せてみて
+

sponsors

CSS記述例

        .wheel-button, .wheel-button:visited {
      line-height: 35px;
      font-weight: bold;
      font-size: 36px;
      background: #df4727; 
      padding: 10px 11px;
      text-align: center;
      border-radius: 50px;
      width: 35px;
      height: 35px;
      color: white;
      display: block;
      margin: 70px auto 20px;
      border: 3px solid #92311e;
      box-shadow: 0 1px 2px rgba(0,0,0,0.25);
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
      text-decoration: none;
    }
    
    .wheel-button span, .wheel span{
      position: relative;
      -moz-transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      display: block;
    }

    .wheel-button.active span{
      transform: rotate(135deg);
      -ms-transform: rotate(135deg); /* IE 9 */
      -webkit-transform: rotate(135deg); /* Safari and Chrome */
    }
    .wheel li a:hover{
      background: rgba(0,0,0,0.8);
    }
    .wheel {
      list-style: none;}
      .wheel li a, .wheel li a:visited{
      background: rgba(0,0,0,0.65);
      border-radius: 50px;
      font-weight: bold;
      padding: 10px;
      text-align: center;
      width: 20px;
      height: 20px;
      border: 1px solid black;
      box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
      color: white;
      -moz-transition: all 0.25s ease;
      -webkit-transition: all 0.25s ease;
      -o-transition: all 0.25s ease;
      transition: all 0.25s ease;
      text-decoration: none;
    }  
  
Javascriptサンプルページ一覧
skuare.net