【jQuery】ドロップダウンメニューを実装する2種類の方法

今回は、jQueryを使ってドロップダウンメニューを実装する方法をご紹介いたします。
jQueryのaddClass/removeClassを使って表示させる方法と、slideUp/slideDownを使って表示させる方法の2種類をご紹介したいと思います。

目次

1. jQueryのaddClass/removeClassを使って表示させる方法

完成形デモ

See the Pen dropdown-menu by crnote (@crnote) on CodePen.

html

htmlの記述は以下のようになります。クラス名「dropdown-menu」の部分が、マウスホバーした時に表示される内容です。

  2. <nav class="gnav">
  3.   <ul class="gnav-contents">
  4.     <li class="menu"><div>メニュー1</div>
  5.       <ul class="dropdown-menu">
  6.         <li><a href="">リンク1</a></li>
  7.         <li><a href="">リンク2</a></li>
  8.         <li><a href="">リンク3</a></li>
  9.       </ul>
  10.     </li>
  11.     <li class="menu"><div>メニュー2</div>
  12.       <ul class="dropdown-menu">
  13.         <li><a href="">リンク1</a></li>
  14.         <li><a href="">リンク2</a></li>
  15.         <li><a href="">リンク3</a></li>
  16.       </ul>
  17.     </li>
  18.     <li class="menu"><div>メニュー3</div>
  19.       <ul class="dropdown-menu">
  20.         <li><a href="">リンク1</a></li>
  21.         <li><a href="">リンク2</a></li>
  22.         <li><a href="">リンク3</a></li>
  23.       </ul>
  24.     </li>
  25.   </ul>
  26.   
  27. </nav>

CSS

cssでナビゲーション部分のレイアウトと装飾を整えます。
ポイントは、2点です。
① 「.dropdown-menu」に「display: none;」を設定して非表示にする
② 「.dropdown-menu.open」に「display: block;」を設定する
後ほど、jQueryで、マウスホバー時に「.dropdown-menu」にクラス名「open」を付与するという処理を実装をします。

  1. li {list-style:none;}
  2. a {
  3.   text-decoration: none;
  4.   color: #000;
  5. }
  6. a:hover {
  7.   text-decoration: underline;
  8. }
  9. /*レイアウトを整える*/
  10. .gnav {
  11.   width: 95%;
  12.   margin: 0 auto;
  13. }
  14. .gnav .gnav-contents {
  15.   display: flex;
  16. }
  17. .gnav .gnav-contents .menu {
  18.   width: calc(100% / 3);
  19.   text-align: center;
  20.   cursor: pointer;
  21. }
  22. .gnav .gnav-contents .menu div {
  23.   padding: 10px 0;
  24.   background-color: #ee7800;
  25. }
  26. .gnav .gnav-contents .menu .dropdown-menu {
  27.   margin: 0;
  28.   padding: 0;
  29.   background-color: #eda65f;
  30.   /*非表示の設定*/
  31.   display: none;
  32. }
  33. /*.openが付与された時、表示の設定*/
  34. .gnav .gnav-contents .menu .dropdown-menu.open {
  35.   display: block;
  36. }
  37. .gnav .gnav-contents .menu .dropdown-menu li {
  38.   padding: 10px 0;
  39. }

jQuery

$(‘.menu’).hover(function() {…}の…の部分に「.menu」をマウスホバーした場合の動き、
その後の,function() {…}の…の部分に「.menu」をマウスホバーが外れた場合の動きを記述します。

マウスホバーした場合は、addClass()でクラス名「open」を付与します。
マウスホバーが外れた場合は、.removeClass()でクラス名「open」を取り除きます。

$(this).children(‘.dropdown-menu’)は、マウスホバーした.menu(=this)の小要素の「.dropdown-menu」を指します。このような指定をすることで、マウスホバーした箇所の「.dropdown-menu」のみ表示させることが出来ます。

  1. // ドロップダウンメニュー
  2. //.menuをhoverした場合
  3. $('.menu').hover(
  4.   function() {
  5.     //クラス名「open」を付与する
  6.     $(this).children('.dropdown-menu').addClass('open');
  7.     //hoverが外れた場合
  8.   }, function() {
  9.     //クラス名「open」を取り除く
  10.     $(this).children('.dropdown-menu').removeClass('open');
  11.   }
  12. );

2. jQueryのslideUp/slideDownで表示させる方法

完成形デモ

See the Pen dropdown-menu2 by crnote (@crnote) on CodePen.

HTML

HTMLの記述は上記「1. jQueryのaddClass/removeClassを使って表示させる方法」と同様です。

CSS

cssも、上記と同様にナビゲーション部分のレイアウトと装飾を整えます。
「display: none;」は設定せずに、jQueryで表示/非表示を切り替えます。

  1. li {list-style:none;}
  2. a {
  3.   text-decoration: none;
  4.   color: #000;
  5. }
  6. a:hover {
  7.   text-decoration: underline;
  8. }
  9. /*レイアウトを整える*/
  10. .gnav {
  11.   width: 95%;
  12.   margin: 0 auto;
  13. }
  14. .gnav .gnav-contents {
  15.   display: flex;
  16. }
  17. .gnav .gnav-contents .menu {
  18.   width: calc(100% / 3);
  19.   text-align: center;
  20.   cursor: pointer;
  21. }
  22. .gnav .gnav-contents .menu div {
  23.   padding: 10px 0;
  24.   background-color: #ee7800;
  25. }
  26. .gnav .gnav-contents .menu .dropdown-menu {
  27.   margin: 0;
  28.   padding: 0;
  29.   background-color: #eda65f;
  30. }
  31. .gnav .gnav-contents .menu .dropdown-menu li {
  32.   padding: 10px 0;
  33. }

jQuery

最初に「.menu」の中の「.dropdown-menu」を、.hide()で非表示にします。

マウスホバーした場合は、slideDown()で「.dropdown-menu」を表示します。
マウスホバーが外れた場合は、slideUp()で「.dropdown-menu」を非表示にします。

.dropdown-menu:not(:animated)は、アニメーション実行中でない場合の処理の記述をします。
この記述がないと、マウスホバーをした回数だけ、処理が繰り返されてしまいます。

  1. // ドロップダウンメニュー
  2. //.dropdown-menuを一旦隠す
  3. $('.menu').find('.dropdown-menu').hide();
  4. //.menuをhoverした場合
  5. $('.menu').hover(function(){
  6.   //.dropdown-menuをslideDown
  7.   $(".dropdown-menu:not(:animated)", this).slideDown();
  8.   //hoverが外れた場合
  9.     }, function(){
  10.   //.dropdown-menuをslideUp
  11.   $(".dropdown-menu",this).slideUp();
  12. });

まとめ

jQueryでのドロップダウンメニューの実装方法を2種類ご紹介いたしました。
slideUp/slideDownを使うと、アニメーションに動きを出すことが出来ますね。
自由にカスタマイズして、使い分けてみてください！

PAGE TOP