多階層のナビゲーションでレスポンシブにも対応しているjQueryプラグイン「jquery.slimmenu.js」の使い方をメモ。
使い方
下記からダウンロードできます。
adnantopal/slimmenu: slimMenu is a lightwei… – GitHub
HTML内に必要なファイルを読み込みます。
<link rel="stylesheet" href="./slimmenu.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="./jquery.slimmenu.min.js"></script>
HTML
ulタグでナビゲーションを作成します。
<ul class="slimmenu"> <li> <a href="#">Slim Menu 1</a> <ul> <li> <a href="#">Slim Menu 1.1</a> <ul> <li><a href="#">Slim Menu 1.1.1</a></li> <li> <a href="#">Slim Menu 1.1.2</a> <ul> <li><a href="#">Slim Menu 1.1.2.1</a></li> <li><a href="#">Slim Menu 1.1.2.2</a></li> </ul> </li> </ul> </li> <li><a href="#">Slim Menu 1.2</a></li> </ul> </li> <li><a href="#">Slim Menu 2</a></li> <li> <a href="#">Slim Menu 3</a> <ul> <li> <a href="#">Slim Menu 3.1</a> <ul> <li><a href="#">Slim Menu 3.1.1</a></li> <li><a href="#">Slim Menu 3.1.2</a></li> </ul> </li> <li><a href="#">Slim Menu 3.2</a></li> </ul> </li> <li><a href="#">Slim Menu 4</a></li> </ul>
JavaScript
$(function() {
$('.slimmenu').slimmenu();
});
オプション
オプション設定のデモページはこちら。
オプションについて詳しくは公式サイトをご確認ください。
| resizeWidth | ナビゲーションを切り替えるブラウザ幅を指定。 ブラウザ幅が指定したサイズ以下になると、スマホ用のナビゲーションに切り替わる。 初期値は800。 |
|---|---|
| initiallyVisible | スマホ用のナビゲーションが最初から表示された状態にするかどうかを指定。 初期値はfalse。 |
| collapserTitle | スマホ用のナビゲーションで左上に表示するタイトルを指定。 HTMLタグを含ませることも可能。 初期値は’Main Menu’。 |
| animSpeed | ナビゲーション開閉のスピードを指定。 初期値は’medium’で、値は’slow’, ‘medium’, ‘fast’か数値で指定。 |
| easingEffect | ナビゲーション開閉のイージングを指定。 初期値はnull。 |
| indentChildren | スマホ用のナビゲーションのときに、第二階層以下にインデントを付けるかどうかを指定。 インデントに使用する文字列はchildrenIndenterで指定。 初期値はfalse。 |
| childrenIndenter | indentChildrenで使用する文字列を指定。 HTMLタグを含ませることも可能。 初期値は 。 |
| expandIcon | ナビゲーションが閉じているときに表示されるアイコンの指定。 初期値は<i>▼<i>。 |
| collapseIcon | ナビゲーションが開いているときに表示されるアイコンの指定。 初期値は<i>▲<i>。 |
【参考サイト】
コメントが承認されるまで時間がかかります。