jqueryでできる簡単プルダウン

メニューを触った瞬間にプルダウンするメニューはホームページの画面をうまく使える必須ツールです。

jqueryを使えば、簡単にプルダウンメニューを作ることができます。

htmlタグ

<ul id="menu">
<li><a href="">メニュー</a>
<ul id="sub">
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
</ul>
</li>
<li><a href="">メニュー</a>
<ul id="sub">
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
</ul>
</li>
</ul>

CSS

ul,li{margin:0; padding:0;}
ul#menu{margin:10px auto; width:360px;}
ul#menu li{float:left; width:180px; height:48px; background-color:#2b76cc;
list-style:none; text-align:center; border-bottom:1px solid #666;}
ul#menu li a{display:block; width:178px; height:100%; line-height:48px;
color:#fff; text-decoration:none; border-left:1px solid #fff;
border-right:1px solid #fff; border-bottom:1px solid #fff;}
ul#sub li{float:none;}

jquery

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.4');</script>
<script type="text/javascript">
$(function(){
$("ul#sub").hide();
$("ul#menu>li").hover(function(){
$("ul:not(:animated)", this).slideDown();},
function(){$("ul#sub",this).slideUp();});
});
</script>

一つ一つ解説していくと

ul#sub.hide();

まずはこれで<ul id="sub"></ul>の部分を隠します。

 $("ul#menu>li").hover

<ul id="menu">の直下のliをさわった時(hover)だけ実行されるようにアニメーションを指定します。

hover(さわった時,離れた時)

hoverは左がさわった時,右が離れたときに実行されます。

function(){$("ul:not(:animated)", this).slideDown();}

触った時に下に下がってサブメニューが表示されます。

not(:animated)

アニメーションが起こっていない時だけ、起こるように指定するために使われています。
実際にこの部分を消して実行してみるとわかります。
メニュー部分をさわって、離れてを繰り返すと下に下がり、上がるアニメーションがさわった回数起こり続けます。

function(){$("ul#sub",this).slideUp();}

離れたときに、上に上がるアニメーションが起こり元の状態に戻ります。

おまけ：flashの上にドロップメニューを表示する

ホームページの一部分にflashを使うサイトが増えていますが、ドロップメニューを使いたくても設定を行わないと、flashの下に入ってしまいます。

上のスタイルシートで説明すると
css

ul#sub li{float:none; z-index:2; position:relative;}

に変更
flash
一般的なflashの挿入タグを書いてみました。

<div style="z-index:1; position: relative;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,0,0"
width="700" height="200" id="flash"> 
<param name="movie" value="flash.swf"> 
<param name="quality" value=high> 
<param name="bgcolor" value=#FFFFFF> 
<param value="transparent" name="wmode" />
<embed src="flash.swf" quality=high bgcolor=#FFFFFF width="700"
height="200"  name="flash" type="application/x-shockwave-flash"
 pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> 
</object> 
</div>

黄色時の部分を追加してあげることでflashの上にドロップメニューが表示することができるようになります。
※z-indexは大きい数字ほど上に表示されるので、数字はflashの方が小さければ、大丈夫！