サイト制作に関するメモ書き

HOME > JavaScript > jQuery > jquery.slimmenu.jsの使い方まとめ

jquery.slimmenu.jsの使い方まとめ

多階層のナビゲーションでレスポンシブにも対応している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();
});

jquery.slimmenu.jsのデモページ
 

オプション

オプション設定のデモページはこちら。
オプションについて詳しくは公式サイトをご確認ください。

resizeWidth ナビゲーションを切り替えるブラウザ幅を指定。
ブラウザ幅が指定したサイズ以下になると、スマホ用のナビゲーションに切り替わる。
初期値は800。
initiallyVisible スマホ用のナビゲーションが最初から表示された状態にするかどうかを指定。
初期値はfalse。
collapserTitle スマホ用のナビゲーションで左上に表示するタイトルを指定。
HTMLタグを含ませることも可能。
初期値は’Main Menu’。
animSpeed ナビゲーション開閉のスピードを指定。
初期値は’medium’で、値は’slow’, ‘medium’, ‘fast’か数値で指定。
easingEffect ナビゲーション開閉のイージングを指定。
初期値はnull。
indentChildren スマホ用のナビゲーションのときに、第二階層以下にインデントを付けるかどうかを指定。
インデントに使用する文字列はchildrenIndenterで指定。
初期値はfalse。
childrenIndenter indentChildrenで使用する文字列を指定。
HTMLタグを含ませることも可能。
初期値は&nbsp;。
expandIcon ナビゲーションが閉じているときに表示されるアイコンの指定。
初期値は<i>&#9660;<i>。
collapseIcon ナビゲーションが開いているときに表示されるアイコンの指定。
初期値は<i>&#9650;<i>。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP