päivittäin kukka

  • twitter
  • facebook
  • instaglam
  • rss

クリエイティブ

簡単にレスポンシブ対応のナビゲーションが設置できる「slicknav」

slicknav

レスポンシブ対応のナビゲーションで実際に使ってみて良かったjQueryのプラグイン「slicknav」をご紹介します。

slicknav

使い方はとても簡単です。ダウンロードしたslicknav.cssとjquery.slicknav.min.jsをhtmlのhead内に読み込みます。
jQueryを使うのでjquery.jsも読み込んでおきます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="slicknav.css" />
<script src="jquery.slicknav.min.js"></script>

次にhtmlのナビゲーションを作りたい場所に下記のようにマークアップします。

<ul id="menu">
	<li><a href="#">item 1</a></li>
	<li><a href="#">item 2</a></li>
	<li><a href="#">item 3</a></li>
	<li><a href="#">item 4</a></li>
</ul>

head内のjquery.slicknav.min.jsのスクリプトの下に、スクリプトをセットします。

<script>
	$(function(){
		$('#menu').slicknav();
	});
</script>

cssに下記の記述をします。少し分かりづらいですが40emまではslicknav_menuを表示すると言った意味です。
ここは任意で調整してみてください。

.slicknav_menu {
	display:none;
}

@media screen and (max-width: 40em) {
	/* #menu is the original menu */
	#menu {
		display:none;
	}
	
	.slicknav_menu {
		display:block;
	}
}

デモを用意しました。
画面を小さくすると上にメニューが表示されます。
シンプルなナビゲーションなのでカスタマイズなども簡単にできるので、ぜひ試してみてください!

こちらの記事もよく読まれてます。