Pathみたいなナビゲーションが作れるjQueryプラグイン ferroMenu

2013.11.20・Cat：javascript デザイナー役員

Pathみたいなナビゲーションが作れるjQueryプラグイン ferroMenuを使ってみた。

以下設置方法

<link rel="stylesheet" href="css/jquery.ferro.ferroMenu.css" />
<script src="js/jquery.ferro.ferroMenu-1.0.min.js" type="text/javascript"></script>

1 2	<link rel="stylesheet" href="css/jquery.ferro.ferroMenu.css" /> <script src="js/jquery.ferro.ferroMenu-1.0.min.js" type="text/javascript"></script>

まずはダウンロードしたファイルを読み込む。

CSSは必ず読み込んだ方が良い。ただ、デフォルトで#navに対してスタイルをかけているが

変更が容易は容易だった。

$(document).ready(function()
{
	$("#left-bottom").ferroMenu();
});

$(document).ready(function()

{

$("#left-bottom").ferroMenu();

});

次にターゲットに対して ferroMenu関数を実行する。

1ページに複数ターゲットを置いて別々に指定したらエラーになり最後のものしか実行されなかった。

<ul id="left-bottom" class="nav">
    <li><a href="#"><i>1</i></a></li>
    <li><a href="#"><i>2</i></a></li>
    <li><a href="#"><i>3</i></a></li>
    <li><a href="#"><i>4</i></a></li>
    <li><a href="#"><i>5</i></a></li>
    <li><a href="#"><i>6</i></a></li>
</ul>

</ul>

ターゲットはulで指定した方が無難だった。

また、以下はパラメータ一覧

パラメータ	値	デフォルト値	説明
closeTime	int	500	メニューが閉じる時の時間(ミリ秒)
delay	int	0	各アイテムのアニメーション開始時のディレイ
drag	bool	TRUE	メニューをドラッグできるか否か
easing	string	cubic-bezier(0.680, -0.550, 0.265, 1.550)	イージングの指定
margin	int	10	配置によるが、エッジに対するマージン
position	‘left-top’ \| ‘center-top’ \| ‘right-top’ \| ‘right-bottom’ \| ‘center-bottom’ \| ‘left-bottom’ \| ‘right-center’ \| ‘left-center’ \| ‘center-center’	‘left-bottom’	配置位置。dragがtrueであればデフォルトの位置
radius	int	100	アイテムの距離感
rotation	int	0	アイテムの回転角度
opened	bool	FALSE	デフォルトでメニューを開いてるか否か
openTime	int	500	アイテムが開くスピード(ミリ秒)