jQueryを使ってマウスホバーでドロップダウンするメニューを実装する方法

jQueryを使ってドロップダウンメニューを実装する方法をご紹介いたします。

ドロップダウンメニューは、マウスホバーすると子メニューが出てくる、よく見かけるナビゲーションですね。

jQueryによるドロップダウンメニューの実装方法

jQueryでドロップダウンメニューを実装するのは、非常に簡単です。

まず、HTMLでは以下のように入れ子のメニューを作成します。

<ul class="dropnav">
  <li>
    <a href="">MENU1</a>
    <ul class="child-menu">
      <li><a href="">CHILD MENU1</a></li>
      <li><a href="">CHILD MENU2</a></li>
      <li><a href="">CHILD MENU3</a></li>
    </ul>
  </li>
  <li><a href="">MENU2</a></li>
  <li><a href="">MENU3</a></li>
</ul>

「MENU1」「MENU2」「MENU3」が最初に表示されていて、「MENU1」にマウスホバーすると「CHILD MENU1」「CHILD MENU2」「CHILD MENU3」が出てくるように制御します。

続いて、CSSで子メニューを非表示にしておきます。

.child-menu {
  display: none;
}

最後に子メニューをドロップダウンさせるためのスクリプトを記述します。記述場所は</body>の直前でOKです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
  $("ul.dropnav > li").hover(function() {
    $("ul:not(:animated)", this).slideDown();
  }, function(){
    $("ul.child-menu", this).slideUp();
  });
});
</script>

「ul.dropnav > li」の部分で子メニューが存在している要素を指定します。「ul.child-menu」の部分では子メニューを指定します。

これでドロップダウンメニューの完成です。あとはCSSで見た目を整えてください。

もし、メニューをフェードインで表示したい場合は、スクリプトを下記のようにします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
<script>
$(function() {
  $('ul.dropnav > li').hover(function() {
    $(this).find('.child-menu').stop(true).fadeIn(500);
  },function() {
    $(this).find('.child-menu').fadeOut(300);
  });
});
</script>

あとがき

非常に簡単に実装できますので、参考にしていただければ幸いです。

jQueryを使わずにCSSのみでドロップダウンメニューを実装したい場合は、「マウスホバーで開くアコーディオンメニューをCSSのみで実装する方法」をご参照ください。