マウスオーバーしてみて

+

展開する方向が変えられる

+

たくさん出せる!

+

ヤリスギィィィ

+

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/wheelmenu.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.wheelmenu.min.js"></script>
<script>
	$(window).load(function(){
		$('.WheelMenu-btn').wheelmenu({
			trigger: "hover",
			animation: "fly",
			animationSpeed: "fast"
		});
	});
</script>
<div id="WheelMenuBox01" class="WheelMenu-box">
	<p class="title">マウスオーバーしてみて</p>
	<a href="#WheelMenuDemo01" id="WheelMenuBtn01" class="WheelMenu-btn">
		<span>+</span>
	</a>
</div>

<div id="WheelMenuBox02" class="WheelMenu-box">
	<p class="title">展開する方向が変えられる</p>
	<a href="#WheelMenuDemo02" id="WheelMenuBtn02" class="WheelMenu-btn">
		<span>+</span>
	</a>
</div>
	
<div id="WheelMenuBox03" class="WheelMenu-box">
	<p class="title">たくさん出せる!</p>
	<a href="#WheelMenuDemo03" id="WheelMenuBtn03" class="WheelMenu-btn">
		<span>+</span>
	</a>
</div>
	
<div id="WheelMenuBox04" class="WheelMenu-box">
	<p class="title">ヤリスギィィィ</p>
	<a href="#WheelMenuDemo04" id="WheelMenuBtn04" class="WheelMenu-btn">
		<span>+</span>
	</a>
</div>

<ul id="WheelMenuDemo01" data-angle="all" class="WheelMenu-demo">
	<li class="item"><a href="#">東</a></li>
	<li class="item"><a href="#">西</a></li>
	<li class="item"><a href="#">南</a></li>
	<li class="item"><a href="#">北</a></li>
</ul>

<ul id="WheelMenuDemo02" data-angle="NW" class="WheelMenu-demo">
	<li class="item"><a href="#">東</a></li>
	<li class="item"><a href="#">西</a></li>
	<li class="item"><a href="#">南</a></li>
	<li class="item"><a href="#">北</a></li>
</ul>

<ul id="WheelMenuDemo03" data-angle="all" class="WheelMenu-demo">
	<li class="item"><a href="#">臨</a></li>
	<li class="item"><a href="#">兵</a></li>
	<li class="item"><a href="#">闘</a></li>
	<li class="item"><a href="#">者</a></li>
	<li class="item"><a href="#">皆</a></li>
	<li class="item"><a href="#">陣</a></li>
	<li class="item"><a href="#">列</a></li>
	<li class="item"><a href="#">在</a></li>
	<li class="item"><a href="#">前</a></li>
</ul>

<ul id="WheelMenuDemo04" data-angle="all" class="WheelMenu-demo">
	<li class="item"><a href="#">1</a></li>
	<li class="item"><a href="#">2</a></li>
	<li class="item"><a href="#">3</a></li>
	<li class="item"><a href="#">4</a></li>
	<li class="item"><a href="#">5</a></li>
	<li class="item"><a href="#">6</a></li>
	<li class="item"><a href="#">7</a></li>
	<li class="item"><a href="#">8</a></li>
	<li class="item"><a href="#">9</a></li>
	<li class="item"><a href="#">10</a></li>
	<li class="item"><a href="#">11</a></li>
	<li class="item"><a href="#">12</a></li>
	<li class="item"><a href="#">13</a></li>
	<li class="item"><a href="#">14</a></li>
	<li class="item"><a href="#">15</a></li>
	<li class="item"><a href="#">16</a></li>
	<li class="item"><a href="#">17</a></li>
	<li class="item"><a href="#">18</a></li>
	<li class="item"><a href="#">19</a></li>
	<li class="item"><a href="#">20</a></li>
	<li class="item"><a href="#">21</a></li>
	<li class="item"><a href="#">22</a></li>
	<li class="item"><a href="#">23</a></li>
	<li class="item"><a href="#">24</a></li>
	<li class="item"><a href="#">25</a></li>
	<li class="item"><a href="#">26</a></li>
	<li class="item"><a href="#">27</a></li>
</ul>

WheelMenuについて

WheelMenuは、マウスオーバーした要素を中心にファンネル(のようなメニュー)が円状に配置されるプラグインです。
使う場所を選ぶプラグインですが、インパクトのある面白いプラグインです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスAttribution-ShareAlike 4.0 International CC
対応ブラウザ

関連するjQueryプラグイン

  • ContextMenu2

    ContextMenu2

    右クリックのメニューをオリジナルなものに変更できる

  • FlexibleSlideToTopAccordion

    FlexibleSlideToTopAccordion

    自動で頭出しをしてくれるアコーディオンメニュー

  • MeanMenu

    MeanMenu

    レスポンシブメニューを簡単に設置できる

  • Tabber

    Tabber

    タブメニューを簡単に設置できる

  • ContextMenu1

    ContextMenu1

    右クリックメニューをオリジナルにすることができるプラグインです。