jQueryでプルダウンメニュー

jQueryでプルダウンメニュー(たった5行で!)

プルダウンメニューは色々なプラグインが出尽くしているかと思うので、プラグインを使わない且つ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;
}



“jQueryでプルダウンメニュー(たった5行で!)” への7件のフィードバック

  1. html、cssしか分からないjQuery初心者です。
    jQueryでプルダウンメニューのページを見て大変分かりやすく
    勉強になります。

    一つ質問したいのですが、プルアップの場合はどうすればよいのでしょうか?
    お忙しいとは存じますがご教授いただければ幸いです。
    どうぞよろしくお願いいたします。

    1. 閲覧ありがとうございます。

      表示位置に関してはCSSにて制御していますので、「#menu li ul」のtopの指定をマイナス指定で良いかとは思います。
      ただ現場の作りではメニュー項目が増えた際に、都度CSSの修正が必要となってしまいます。

  2. 私も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のサイトを、価格を抑えたお仕事として受けており、その社会性からも、何卒アドバイス頂きたく、宜しくお願い致します><

    1. 閲覧ありがとうございます。

      html部分ですがエスケープしないとソースがわかりません。
      想像ですがli要素内にul要素を入れ子にして、ドロップダウンメニューの親子関係を作っているようなイメージでしょうか?

  3. finnappleさま、ご返信ありがとうございます^^

    http://code.sakura.ne.jp/new_hp/

    こちらにアップしているのが暫定のサイトです。
    はい、親と子と孫は、リストの入れ子で作っていますが…><

    HPの、「CODEの活動」→「情報発信」のところに孫を入れようとしております。
    最初に「CODEの活動」にマウスオーバーしたときに孫メニューが出てしまい、
    一度子メニューにマウスオーバーした後はちゃんと表示されるようになります。
    どうすれば最初の親マウスオーバー時に孫が出ないようになりますでしょうか><?

コメントを残す

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