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

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

使用方法 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個にしておくほうが良いでしょう。
また、サンプルのようにメニューに装飾を加えると格好良く見えます。

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

sponsors

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

記事作成:
記事URL:

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