プルダウンメニューは色々なプラグインが出尽くしているかと思うので、プラグインを使わない且つ5行で実装できるプルダウンメニューのサンプルを作成しました…と言ってもhtmlの構造やCSSの力を大部借りますが。
jQueryでプルダウンメニュー
■html
<body> <ul id="menu"> <li>メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> <li><a href="#">サブメニュー1-2</a></li> <li><a href="#">サブメニュー1-3</a></li> </ul> </li> <li>メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> <li><a href="#">サブメニュー2-3</a></li> </ul> </li> </ul> </body>
■css
#menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 200px; background: #eee; border: solid 1px #ccc; } #menu li ul li { margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; }
■javascript
$("#menu li").hover(function() { $(this).children('ul').show(); }, function() { $(this).children('ul').hide(); });
解説
今回の一番のポイントはjQueryではありません。以下のようにli要素の中にul要素を入れ子にすることです。
<li>メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> <li><a href="#">サブメニュー1-2</a></li> <li><a href="#">サブメニュー1-3</a></li> </ul> </li>
上記のように入れ子にすることでjavascript側が簡単になります。
理由は後で説明するとして、jQueryの説明に進みます。
今回はhoverイベントを使います。
hoverはとても便利で、mouseoverとmouseout時の処理を同時に設定できます。
まずmouseover時の処理は以下です。
$("#menu li").hover(function() { $(this).children('ul').show(); }
メニューにカーソルが当たったら子要素のulを表示すると書いてあります。
次にmouseout時は、
function() { $(this).children('ul').hide(); });
メニューからカーソルがはずれたら子要素のulを非表示にします。
とてもシンプルです。
これは上記で説明したli要素の中にul要素を入れ子にしたおかげです。
ul要素が入れ子になってない場合、メニューのli要素をmouseoverして表示させたプルダウンメニューにカーソルを遷移した瞬間にプルダウンメニューは非表示になってしまいます。なぜならプルダウンメニューに移動した瞬間にメニューのli要素をmouseoutしてしまうからです。
しかし以下のように入れ子になっているおかげでメニューからプルダウンメニューにカーソルを移動してもli要素をmouseoutしないようになっています。
ちなみにCSSは基本好きに設定して頂ければよいかと思いますが、ただ1点注意点をあげると入れ子にしているul要素はdisplay: none;で非表示にして下さい(当然ですね)。
#menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 200px; background: #eee; border: solid 1px #ccc; }
html、cssしか分からないjQuery初心者です。
jQueryでプルダウンメニューのページを見て大変分かりやすく
勉強になります。
一つ質問したいのですが、プルアップの場合はどうすればよいのでしょうか?
お忙しいとは存じますがご教授いただければ幸いです。
どうぞよろしくお願いいたします。
閲覧ありがとうございます。
表示位置に関してはCSSにて制御していますので、「#menu li ul」のtopの指定をマイナス指定で良いかとは思います。
ただ現場の作りではメニュー項目が増えた際に、都度CSSの修正が必要となってしまいます。
ありがとうございましたm(_ _)m
私もhtml、cssしか分からないjQuery初心者です。
こちらのサイトのおかげで、ドロップダウンメニューが入れられました!!
ぜひともご相談させて頂きたいのですが、
孫メニューを作りたく思っております。
HPの、「CODEの活動」→「情報発信」のところに入れようとしております。
最初に「CODEの活動」にマウスオーバーしたときに孫メニューが出てしまい、
一度孫メニューにマウスオーバーした後はちゃんと表示されるようになります。
どうすれば最初の親マウスオーバー時に孫が出ないようになりますでしょうか><?
◆ジャヴァスクリプトがわからないながら、いろいろ調べようとして下記のように
書いてみました。><
$(function(){
$(“.navi li”).hover(function(){
$(“ul”,this).show();
},
function(){
$(“ul”,this).hide();
});
});
$(“.navi2 li”).hover(function() {
$(this).children(‘ul’).show();
},
function() {
$(this).children(‘ul’).hide();
});
$(“.navi li, .navi li *”).hover(function() {
$(this).children(‘ul’).hide();
});
◆HTML
…
CODEの活動
災害救援プロジェクト
終了した災害救援プロジェクト
CODE寺子屋セミナー
情報発信
World Voice
災害を忘れない
…
◆CSS
ul.navi li ul li ul.navi2 {
display: none;
position:absolute;
left: 180px;
top: 80%;
}
社会貢献性の高いNPOのサイトを、価格を抑えたお仕事として受けており、その社会性からも、何卒アドバイス頂きたく、宜しくお願い致します><
閲覧ありがとうございます。
html部分ですがエスケープしないとソースがわかりません。
想像ですがli要素内にul要素を入れ子にして、ドロップダウンメニューの親子関係を作っているようなイメージでしょうか?
上記の投稿、不勉強にて本当に恐縮です><またお答え頂けましたら本当に嬉しいです。
finnappleさま、ご返信ありがとうございます^^
http://code.sakura.ne.jp/new_hp/
こちらにアップしているのが暫定のサイトです。
はい、親と子と孫は、リストの入れ子で作っていますが…><
HPの、「CODEの活動」→「情報発信」のところに孫を入れようとしております。
最初に「CODEの活動」にマウスオーバーしたときに孫メニューが出てしまい、
一度子メニューにマウスオーバーした後はちゃんと表示されるようになります。
どうすれば最初の親マウスオーバー時に孫が出ないようになりますでしょうか><?