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

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

2008

01/29

メニューにはさまざまありますが、ドロップダウン型の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を使用しています。