[jQuery]簡単に設置できるレスポンシブ対応のナビゲーションメニューjQueryプラグイン – Naver

最近注文が増えてきたレスポンシブ対応。
ナビゲーションをどう対応するかよく迷います…。
そんなレスポンシブ用ナビゲーションメニューの選択肢の一つとして、簡単に実装できるNaverの紹介です。

■必要ファイル

■サンプル

ウインドウを縮めるとメニューが閉じられます。

今回のサンプルで使用しているナビゲーションのHTMLです。

html

<nav id="navre">
	<a href="#">home</a>
	<a href="#">facebook</a>
	<a href="#">twitter</a>
	<a href="#">g+</a>
	<a href="#">rss</a>
	<a href="#">Contact</a>
</nav>

ナビゲーションメニューにスタイルを入れます。
メディアクエリを使って幅が740px以下の時にフロートを解除するよう設定します。

css

#navre a {
	background: #254960;
	color: #fff;
	display: block;
	float: left;
	font-size: 16px;
	line-height: 40px;
	margin: 0 1px 0 0;
	padding: 0 20px;
	font-weight: bold;
	text-decoration: none;
}
#navre a:hover {
	background: #222;
}
@media screen and (max-width: 740px) {
	#navre a {
		float: none;
		margin: 0 0 1px 0;
		width: 100%;
	}
}

ヘッダー内に外部ファイルとして「jquery.js」「jquery.fs.naver.js」「jquery.fs.naver.css」を読み込みます。
そしてナビゲーションメニューのタグやID名などをjQueryのセレクタで指定し完成です。

html

<link rel="stylesheet" type="text/css" href="/css/jquery.fs.naver.css"/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.fs.naver.js"></script>
<script type="text/javascript">
$(function() {
    $("#navre").naver();
});
</script>

サンプルのようにメニュー表示にアニメーションを使用する場合は下記のように設定します。

<script type="text/javascript">
$(function() {
	$("#navre").naver({
			animated: true
	});
});
</script>

アニメーション以外にもラベルの文字を非表示にしたり、テキストを変更することができます。

	// Default Options
	var options = {
		label: true, //ラベルの表示
		labelClosed: "Navigation", //ナビを開くときのテキスト
		labelOpen: "Close" //ナビを閉じるときのテキスト
	};

▼今回紹介したNaverのサイト

iConvert Icons

SITE:Ben Plum

[jQuery]簡単に設置できるレスポンシブ対応のナビゲーションメニューjQueryプラグイン – Naver

■必要ファイル

■サンプル

LATEST ENTRY - 新着記事 -

CATEGORY - カテゴリ一覧 -