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>
JavaScriptでスライド式のナビゲーションメニューを作る「Sliding Submenu」サンプル
sponsors
記事作成:2009年2月20日 10:11
記事URL:http://www.skuare.net/2009/02/javascriptsliding_submenu.html
TOP > javascript > メニュー関連 > JavaScriptでスライド式のナビゲーションメニューを作る「Sliding Submenu」
前の記事:JavaScriptで画像を簡単にスクロールさせられる「simplyScroll」
次の記事:フロートウィンドウを作成するJavaScript「(mb)ContainersPlus」
あなたにはこちもお勧め!
jQuery プラグインまとめ!