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

javascriptライブラリ「jQuery」でドロップダウン型メニューを作る

｜ ｜ ｜ ｜ ｜ ｜ ｜

メニューにはさまざまありますが、ドロップダウン型のsuckerfishと呼ばれるスタイルは使い勝手がいいかもしれません。
今回はJavaScriptライブラリjQueryを用いてドロップダウン型のメニューを作成します。
via : jQuery suckerFish

使用方法
jQueryからjquery.jsをダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("fast"); },
function() { }
);
if (document.all) {
$("#nav-one li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
</script>
上記のように記述したらメニュー部分を以下のようにします。
<ul id="nav-one" class="nav">
<li><a href="リンクURI">メニュー1</a>
<ul>
<li><a href="リンクURI">サブメニュー1.1</a></li>
<li><a href="リンクURI">サブメニュー1.2</a></li>
</ul>
</li>
<li><a href="リンクURI">メニュー2</a>
<ul>
<li><a href="リンクURI">サブメニュー2.1</a></li>
<li><a href="リンクURI">サブメニュー2.2</a></li>
</ul>
</li>
</ul>
さらにスタイルを指定します。
javascriptライブラリ「jQuery」でドロップダウン型メニューを作るサンプルではjSuckerFish.cssを使用しています。

記事作成：2008年01月29日

前の記事：JavaScriptライブラリ「jQuery」関連サイト34
次の記事：パスワード強度を視覚的に明示するjavascript「Password Strength」