[JS]さまざまな動きが楽しくてかわいい、サークル状のナビゲーションを実装するスクリプト -Circle Menu

使いどころが難しいですが、サークル状に広がるさまざまなアニメーションを備えたナビゲーションのjQueryのプラグインを紹介します。

Circle Menu

[ad#ad-2]

• Circle Menuのデモ
• Circle Menuの使い方

Circle Menuのデモ

デモでは、7種類の動きが楽しめます。

デモページ: Corners

四隅からくるくるっと回転します。

デモページ: Sides

側面からくるくるっと回転します。

デモページ: Sides, Half Circle

側面から半円状に回転します。

[ad#ad-2]

デモページ: Full, Click to Open

クリックするとくるくるっと回転します。

デモページ: Full, Spins Open

ダイナミックにスピンします。

デモページ: Timing

順番にサークル状に表示します。

デモページ: Timing, Reversed

上のデモでの逆順です。

Circle Menuの使い方

HTML

各アイテムはリスト要素です。

<ul>
	<li><a href="#">+</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
</ul>

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jQuery.circleMenu.js"></script>

JavaScript

jQueryのセレクタでナビゲーション（ul）を指定し、動作の設定をします。

$('ul').circleMenu({
	item_diameter: 40,
	circle_radius: 100,
	direction: 'bottom-right'
});

スクリプトのオプション

angle

アイテムが回転する角度

circle_radius

中心からアイテムまでの半径

delay

トリガーとなるホバー時からの遅延時間

direction

アイテムが動く方向

item_diameter

アイテム間の直径

speed

アニメーションのスピード

step_in

アイテムが中心に入るステップ数

step_out

アイテムが中心から出るステップ数

transition_function

エフェクトの設定

trigger

トリガーの設定