プルダウンメニューは色々なプラグインが出尽くしているかと思うので、プラグインを使わない且つ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を表示すると書いてあります。
次にmouseouｔ時は、
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の活動」にマウスオーバーしたときに孫メニューが出てしまい、
一度子メニューにマウスオーバーした後はちゃんと表示されるようになります。
どうすれば最初の親マウスオーバー時に孫が出ないようになりますでしょうか＞＜？