Pathみたいなナビゲーションが作れるjQueryプラグイン ferroMenu
2013.11.20・Cat:javascript デザイナー 役員
Pathみたいなナビゲーションが作れるjQueryプラグイン ferroMenuを使ってみた。
以下設置方法
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に対してスタイルをかけているが
変更が容易は容易だった。
1 2 3 4 |
$(document).ready(function() { $("#left-bottom").ferroMenu(); }); |
次にターゲットに対して ferroMenu関数を実行する。
1ページに複数ターゲットを置いて別々に指定したらエラーになり最後のものしか実行されなかった。
1 2 3 4 5 6 7 8 |
<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で指定した方が無難だった。
また、以下はパラメータ一覧
パラメータ | 値 | デフォルト値 | 説明 |
---|---|---|---|
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 | アイテムが開くスピード(ミリ秒) |