JavaScriptでスライド式のナビゲーションメニューを作る「Sliding Submenu」

ナビゲーションはサイト制作において非常に重要な要素です。
今回はユーザービリティならびに回遊性向上のため、jQueryプラグイン「Sliding Submenu」を使用してスライドするナビゲーションメニューを作成します。

sponsors

使用方法

Sliding Submenuからファイル一式をダウロードします。

<link href="ssubnav.css" rel="stylesheet" type="text/css">
<script src="jquery-1.3.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.hoverIntent.js"></script>
<script type="text/javascript" src="ssubnav.js"></script>
<script type="text/javascript">
	$(function(){
		$.slidenav({
			animspeed: 'medium',
			hideonout: 'true'
		});
	});
</script>
あとはメニューを以下のように記述するだけです。

<div class="slidenav">
	<ul>
		<li><a href="">Menu Item 1</a>
			<ul>
				<li><a href="">1. Submenu Item 1</a></li>
			</ul>
		</li>
		〜メニュー分〜
	</ul>
</div>
<div class="slidenav-box">
	<div class="subnav"></div>
</div>

サンプル

sponsors

Javascriptサンプルページ一覧
skuare.net