jQuery 超簡単且つ軽量にプルダウン型メニューを実現する方法

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。今回のtipsは…【超簡単且つ軽量にプルダウン型メニューを実現する方法】です。

コード

jqueryで8行と、とても軽い仕様になっていますのでよろしければご活用ください。

jQuery
$(function(){
$(‘.nav’).hover(function(){
var nav = $(this).find(‘li’).length;
$(this).not(‘:animated’).animate({‘height’:24 * nav + ‘px’},’fast’);
},function(){
$(this).animate({‘height’:’24px’},’fast’);
});
});
HTML
<div id="menu">
<ul id="menuBody">
<li>
<ul class="nav">
<li class="head">MANU1</li>
<li>submenu1</li>
</ul>
</li>
</ul>
</div>
CSS

div#menu{height:24px; width:500px; position: relative;}
ul#menuBody{width:100%; position: absolute; z-index:10;}
ul.nav{height:24px; overflow: hidden; background: #222; color:#eee; width: 100px; font-size:12px; text-align: center; float: left;}
ul.nav li{height:24px; line-height:24px;}
ul.nav li:hover{background: #333; cursor: pointer;}
ul#menuBody li{float: left;}
ul#menuBody .nav li{float: none;}

上記は最低限のCSSのみになります。装飾等、任意のCSSを追加してご活用していただければ幸いです。追記(20130327):IE7向けに若干の調整を加えました。

以上になります。

ダウンロード

一応ダウンロードファイルも用意しておきました。