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