skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

ナビゲーションはサイト制作において非常に重要な要素です。
今回はユーザービリティならびに回遊性向上のため、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」サンプル

記事作成：2009年02月20日

前の記事：JavaScriptで画像を簡単にスクロールさせられる「simplyScroll」
次の記事：フロートウィンドウを作成するJavaScript「(mb)ContainersPlus」