[JS]レスポンシブデザインもOK、水平タイプのナビゲーションをいい感じにするスクリプト -HorizontalNav

リスト要素で実装した水平タイプのナビゲーションのスタイルを壊すことなく、配置エリア・表示サイズに合わせて最適化するjQueryのプラグインを紹介します。

HorizontalNav

[ad#ad-2]

• HorizontalNavのデモ
• HorizontalNavの使い方

HorizontalNavのデモ

水平タイプのナビゲーションの見た目は通常、成り行きや指定したサイズになりますが、HorizontalNavを使用すると配置エリアのサイズに合わせて各アイテムのサイズを均等にします。

デモ

マージン、パディング、ボーダーなどのスタイルは維持したままです。

[ad#ad-2]

HorizontalNavは、レスポンシブデザインにも対応しています。
上：未適用、下：HorizontalNav適用です。

デモ：1200pxで表示

上：未適用は各アイテムの成り行きのサイズで、下：適用は配置エリアのフルサイズで表示されます。

デモ：700pxで表示

配置エリアを狭くしても、同様です。

デモ：480pxで表示

上：未適用はが成り行きで二段になってしまう幅になっても、下：適用の見た目は損なわれません。

HorizontalNavの使い方

実装は4ステップです。

Step 1: 外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.horizontalNav.js"></script>

Step 2: HTML

HTMLはシンプルなリスト要素です。

<nav class="horizontal-nav full-width">
	<ul>
		<li><a href="#">Navigation Item</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

Step 3: CSS

スタイルシートはスクリプトの動作には特に必要なく、単にデモで使用されている見た目のスタイルです。

.horizontal-nav {
	background: #efefef;
	border-radius: 6px;
}
.horizontal-nav ul {
	background: #128F9A;
	float: left;
	text-align: center;
	border-radius: 6px;
	border: 1px solid #0e7079;
}
.horizontal-nav ul li {
	float: left;
	border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
	border-left: 0 none;
}
.horizontal-nav ul li a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	border-top: 1px solid rgba(255,255,255, 0.25);
	border-left: 1px solid rgba(255,255,255, 0.25);
}
.horizontal-nav ul li:first-child a {
	border-left: 0 none;
}
.horizontal-nav ul li a:hover {
	background: #12808a;
}
.horizontal-nav ul li:first-child a {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

Step 4: JavaScript

jQueryのセレクタでナビゲーションを指定し、スクリプトを実行します。

<script>
	$(document).ready(function() {
		$('.full-width').horizontalNav({});
	});
</script>

スクリプトのオプション

レスポンシブデザインの設定がオプションで指定できます。

responsive

ウインドウサイズが変更されると、自動でナビゲーションが最適化されます。

デフォルト：true

responsiveDelay

最適化される際の待ち時間です。

デフォルト：100

オプションを使用すると、下記のようになります。

<script>
	$(document).ready(function() {
		$('.full-width').horizontalNav({
			responsive : true;
			responsiveDelay : 100;
		});
	});
</script>