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

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

以下設置方法


&lt;link rel="stylesheet" href="css/jquery.ferro.ferroMenu.css" /&gt;
&lt;script src="js/jquery.ferro.ferroMenu-1.0.min.js" type="text/javascript"&gt;&lt;/script&gt;

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


&lt;ul id="left-bottom" class="nav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;1&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;2&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;3&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;4&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;5&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;6&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</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	アイテムが開くスピード(ミリ秒)