JavaScript

jQueryでドロップダウンメニューを簡単に実装する方法5つ

 

この記事では、jQueryを使ってドロップダウンメニューを簡単に実装する5つの方法をご紹介します。slideUp/slideDownやaddClass/removeClassをはじめ、その他の便利な方法も取り上げます。

Contents
  1. jQueryのslideUp/slideDownを使う
  2. jQueryのaddClass/removeClassを使う
  3. jQueryのfadeIn/fadeOutを使う
  4. jQueryのtoggleClassを使う
  5. jQueryのslideToggleを使う
  6. まとめ

jQueryのslideUp/slideDownを使う

jQueryのslideUp/slideDownを使ったドロップダウンメニューの実装がこちら。

 

HTML

クラス「.menuSub」の部分が、マウスホバーした時に表示される内容です。

<div>
  <ul class="menu">
    <li>menu1</li>
    <li>
      menu2
      <ul class="menuSub">
        <li><a href="#">menu2-1</a></li>
        <li><a href="#">menu2-2</a></li>
      </ul>
    </li>
    <li>
      menu3
      <ul class="menuSub">
        <li><a href="#">menu3-1</a></li>
        <li><a href="#">menu3-2</a></li>
        <li><a href="#">menu3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

 

CSS

クラス「.menuSub」に「display: none;」を設定して非表示にしておきます。表示・非表示の切り替えは、jQueryの処理によって切り替わります。

その他のCSSは、見た目を整えるための設定です。

.menu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: #fff;
  padding: 0;
}

.menu li {
  position: relative;
  width: 100px;
  margin-left: 1px;
  padding: 5px;
  background: #444444;
}

.menuSub {
  position: absolute;
  margin-left: -6px;
  padding: 0;
  display: none;
}

.menuSub li a {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.menuSub li a:hover {
  background: #FFCA7B;
}

 

jQuery/JS

「.menu li」をマウスホバーすると、slideDown()で「.menuSub」が表示されます。マウスホバーが外れると、slideUp()で「.menuSub」が非表示になります。

「:not(:animated)」の記述は必須です。この記述をしておくことで、アニメーション実行中にマウスホバーされても処理が追加されないようになります。

  $(function() {
    $("ul.menu li").hover(
      function() {
        $(".menuSub:not(:animated)", this).slideDown();
      },
      function() {
        $(".menuSub", this).slideUp();
      }
    );
  });

 

jQueryのaddClass/removeClassを使う

jQueryのaddClass/removeClassを使ったドロップダウンメニューの実装はこちら。

 

HTML

クラス「.menuSub」の部分が、マウスホバーした時に表示される内容です。

<div>
  <ul class="menu">
    <li>menu1</li>
    <li>
      menu2
      <ul class="menuSub">
        <li><a href="#">menu2-1</a></li>
        <li><a href="#">menu2-2</a></li>
      </ul>
    </li>
    <li>
      menu3
      <ul class="menuSub">
        <li><a href="#">menu3-1</a></li>
        <li><a href="#">menu3-2</a></li>
        <li><a href="#">menu3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

 

CSS

ポイントが2つあります。

クラス「.menuSub」に「display: none;」を設定して非表示にしておく
クラス「.menuSub.open」に「display: block;」を設定して、ホバー時に表示される

②の「.menuSub.open」は、マウスホバー時に、jQueryで「.menuSub」に「.open」を追加する処理を実装します。

その他のCSSは、見た目を整えるための設定です。

.menu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: #fff;
  padding: 0;
}

.menu li {
  position: relative;
  width: 100px;
  margin-left: 1px;
  padding: 5px;
  background: #444444;
}

.menuSub {
  position: absolute;
  margin-left: -6px;
  padding: 0;
  display: none;
}

/*.openが付与された時、表示の設定*/
.menuSub.open {
  display: block;
}

.menuSub li a {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.menuSub li a:hover {
  background: #FFCA7B;
}

 

jQuery/JS

マウスホバーされると、addClass()で「.menuSub」に「.open」を追加します。CSSの設定で「.menuSub.open」を表示する設定を記述しているので、メニューが表示される仕組みになってます。

マウスホバーが外れると、removeClass()で「.open」を削除します。CSSの設定で「.menuSub」を非表示にする設定を記述しているので、メニューが非表示となります。

  $(function() {
    $(".menu li").hover(
      function() {
        //クラス名「open」を付与する
        $(this).children(".menuSub").addClass("open");
        //hoverが外れた場合
      }, function() {
        //クラス名「open」を取り除く
        $(this).children(".menuSub").removeClass("open");
      }
    );
  });

 

jQueryのfadeIn/fadeOutを使う

この方法では、fadeInとfadeOutを使って、メニューの表示・非表示を滑らかなフェードアニメーションで制御します。これにより、ドロップダウンメニューの表示がより視覚的に心地よくなります。hoverイベントでフェード効果を適用し、ユーザーがメニューにマウスを乗せたときにサブメニューが徐々に表示され、マウスを外すと徐々に消える動作を実現します。

 

HTML

<div>
  <ul class="menu">
    <li>menu1</li>
    <li>
      menu2
      <ul class="menuSub">
        <li><a href="#">menu2-1</a></li>
        <li><a href="#">menu2-2</a></li>
      </ul>
    </li>
    <li>
      menu3
      <ul class="menuSub">
        <li><a href="#">menu3-1</a></li>
        <li><a href="#">menu3-2</a></li>
        <li><a href="#">menu3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

 

CSS

.menu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: #fff;
  padding: 0;
}

.menu li {
  position: relative;
  width: 100px;
  margin-left: 1px;
  padding: 5px;
  background: #444444;
}

.menuSub {
  position: absolute;
  margin-left: -6px;
  padding: 0;
  display: none;
}

.menuSub li a {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.menuSub li a:hover {
  background: #FFCA7B;
}

 

jQuey/JS

$(function() {
  $(".menu li").hover(
    function() {
      $(this).children(".menuSub").fadeIn();
    },
    function() {
      $(this).children(".menuSub").fadeOut();
    }
  );
});

 

jQueryのtoggleClassを使う

この方法では、toggleClassを使って、サブメニューの表示・非表示を制御します。hoverイベントに応じてopenクラスを追加・削除することで、CSSで定義したスタイルを適用または解除します。これにより、状態の切り替えが非常に簡単になり、コードの可読性とメンテナンス性が向上します。

 

HTML

<div>
  <ul class="menu">
    <li>menu1</li>
    <li>
      menu2
      <ul class="menuSub">
        <li><a href="#">menu2-1</a></li>
        <li><a href="#">menu2-2</a></li>
      </ul>
    </li>
    <li>
      menu3
      <ul class="menuSub">
        <li><a href="#">menu3-1</a></li>
        <li><a href="#">menu3-2</a></li>
        <li><a href="#">menu3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

 

CSS

.menu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: #fff;
  padding: 0;
}

.menu li {
  position: relative;
  width: 100px;
  margin-left: 1px;
  padding: 5px;
  background: #444444;
}

.menuSub {
  position: absolute;
  margin-left: -6px;
  padding: 0;
  display: none;
}

.menuSub.open {
  display: block;
}

.menuSub li a {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.menuSub li a:hover {
  background: #FFCA7B;
}

 

jQuey/JS

$(function() {
  $(".menu li").hover(
    function() {
      $(this).children(".menuSub").toggleClass("open");
    },
    function() {
      $(this).children(".menuSub").toggleClass("open");
    }
  );
});

 

jQueryのslideToggleを使う

slideToggleは、要素の表示・非表示をスライドアニメーションで切り替えるメソッドです。この方法では、clickイベントに反応してサブメニューをスライド表示または非表示にします。スライド効果を用いることで、ユーザーに視覚的な手がかりを与え、メニューの開閉がより直感的に感じられるようにしています。

 

HTML

<div>
  <ul class="menu">
    <li>menu1</li>
    <li>
      menu2
      <ul class="menuSub">
        <li><a href="#">menu2-1</a></li>
        <li><a href="#">menu2-2</a></li>
      </ul>
    </li>
    <li>
      menu3
      <ul class="menuSub">
        <li><a href="#">menu3-1</a></li>
        <li><a href="#">menu3-2</a></li>
        <li><a href="#">menu3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

 

CSS

.menu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: #fff;
  padding: 0;
}

.menu li {
  position: relative;
  width: 100px;
  margin-left: 1px;
  padding: 5px;
  background: #444444;
}

.menuSub {
  position: absolute;
  margin-left: -6px;
  padding: 0;
  display: none;
}

.menuSub li a {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.menuSub li a:hover {
  background: #FFCA7B;
}

 

jQuey/JS

$(function() {
  $(".menu li").click(function() {
    $(this).children(".menuSub").slideToggle();
  });
});

 

まとめ

この記事では、jQueryを使ってドロップダウンメニューを実装するさまざまな方法をご紹介しました。

  1. slideUp/slideDownとaddClass/removeClassを使う方法
    アニメーションを伴ったスライド効果でメニューの開閉を制御します。
  2. toggleClassを使う方法
    シンプルにクラスの追加と削除を行い、瞬時にメニューを表示・非表示にします。
  3. slideToggleを使う方法
    スライドアニメーションを簡潔に実装でき、クリックイベントでメニューの状態を切り替えます。
  4. fadeIn/fadeOutを使う方法
    フェード効果でメニューの表示・非表示を滑らかに制御します。

それぞれの方法は、メニューの動きやユーザー体験に応じて選択できます。アニメーションの効果を強調するか、シンプルに状態を切り替えるかは用途によって異なるため、必要に応じて自由にカスタマイズし、適切な方法を選んでください。ぜひ、自分のプロジェクトに合った実装を試してみてください。

ABOUT ME
りん
沖縄から福岡に移住。QA/Webデザイナー/SE/フリーランス/SE人事など。趣味や好きなことをブログにまとめてます。
BLOG：https://rinblog.org
RELATED POST