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の方が小さければ、大丈夫!

9 COMMENTS

tanaka

Jqueryで出来る簡単メニューについてご教示ください。
(1)2階層にする為には、何処をどのように追加したらいいのか。
(2)html・cssについては分かりましたが、jqueryは何処に記述して配置したらいいのか。
以上、2点についてお願いします。

返信する
shu

コメントありがとうございます。
>(1)2階層にする為には、何処をどのように追加したらいいのか。
別に記事を作ってみました 階層を増やす
>(2)html・cssについては分かりましたが、jqueryは何処に記述して配置したらいいのか。
</body>の前にに記述すれば大丈夫です。わかりやすいように記事を少し作り変えてみました。
jquery入門もよろしければ、参考にしてください。

返信する
nria

簡単プルダウンを作ってIE8で確認したら、hoverのときにメニューが下に伸びてしまいます。
コードをコピペして作ったのですが、何か原因があるのでしょうか。
firefoxでは大丈夫でした。

返信する
shu

>nriaさん
コメントありがとうございます。
IETESTERを使って調べてみたのですが、違いとエラーを見つけることができませんでした…。
すいません。m(_ _)m
IE8では、上と同じようにhoverのときにメニューが下に伸びる形なのですが…どうでしょうか?

IE6では、表示したときから、サブメニューが表示されてしまうので、
ul#sub{display:none;}をつけてあげる必要がございました。
ほかにもエラーを探して随時アップしていきます。m(_ _)m

返信する
鍼灸院

やっとできた-!!
ずっと色々なサイトで勉強してやっとできました。丁寧な説明のおかげです。ありがとうございます。

質問なんですが、IE8と9のセキリティ警告は仕方ないのでしょうか?
うちのユーザーはIEがすごく多いですし、高齢のためPCに詳しくなく、セキリティ警告を不安に思う方も多いかとおもうんです。
できればセキリティ警告なしで表示されれば。。

返信する
まあ

メニュー部分に画像を適用させると、画像(メニュー部分にあたる)とサブメニューの間に隙間ができてしまい、サブメニュー部分のリンクを押そうとすると、サブメニュー部分が閉じて、しまい、押せません。
どうしたらいいですか?

返信する
shu

>まあさん
コメントありがとうございます。
ページを見ないとわからないのですが、
ul部分じゃないところを触れたときに、サブメニューは閉じるようになっています。
スタイルシートでmarginが入っていたり、するのかもしれません。

返信する
porco

大変理解しやすい御説明で、勉強になります。ありがとうございます。
こちらのjqueryの部分を商用サイトのメニューに利用させて頂いてもよろしいでしょうか。

返信する
shu

>porco様
わざわざご連絡ありがとうございます。
どうぞご自由にお使いください。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です