skuare.net

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

使用方法
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>

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