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

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

sponsors

使用方法

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>
さらにスタイルを指定します。
サンプルではjSuckerFish.cssを使用しています。

サンプル

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