ドロップダウンメニュー jQuery

ドロップダウンメニュー jQuery 実装方法まとめ｜初心者向け解説

このページでは、jQueryを使って美しいドロップダウンメニューを簡単に実装する方法を初心者向けに解説します。基本的なHTML/CSSの知識さえあれば、コピペで動くコード例も豊富にご紹介します。

 

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

この記事では、jQueryを使ってドロップダウンメニューを実装する2つの方法をご紹介します。滑らかなアニメーションで表示/非表示を切り替える方法と、瞬時に切り替える方法の両方を取り上げ、それぞれのメリット・デメリットを比較しながら解説します。

1. jQueryのslideUp/slideDownを使う方法

1.1 概要

jQueryのslideUp()とslideDown()関数を利用することで、ドロップダウンメニューをアニメーションで表示/非表示にすることができます。

1.2 HTML

ドロップダウンメニューとなる要素に.menuSubクラスを付与し、初期状態ではdisplay: none;で非表示にしておきます。

<ul class="menu">
  <li>メニュー1</li>
  <li>
    メニュー2
    <ul class="menuSub">
      <li><a href="#">サブメニュー2-1</a></li>
      <li><a href="#">サブメニュー2-2</a></li>
    </ul>
  </li>
  <li>
    メニュー3
    <ul class="menuSub">
      <li><a href="#">サブメニュー3-1</a></li>
      <li><a href="#">サブメニュー3-2</a></li>
      <li><a href="#">サブメニュー3-3</a></li>
    </ul>
  </li>
</ul>

1.3 CSS

.menuSubのスタイルを設定し、.menuSub li aにはホバー時のスタイルを設定します。

.menuSub {
  display: none; /* 初期状態では非表示 */
  /* その他のスタイル設定 */
}

.menuSub li a:hover {
  /* ホバー時のスタイル設定 */
}

1.4 jQuery

.menu liにマウスホバーした際に、.slideDown()で.menuSubをアニメーション表示します。マウスホバーが外れた際には、.slideUp()で.menuSubをアニメーション非表示にします。

:not(:animated)を使うことで、アニメーション実行中にマウスホバーイベントが重複して発生しないように制御します。

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

2. jQueryのaddClass/removeClassを使う方法

2.1 概要

jQueryのaddClass()とremoveClass()関数を利用することで、ドロップダウンメニューを瞬時に表示/非表示にすることができます。

2.2 HTML

ドロップダウンメニューとなる要素に.menuSubクラスを付与し、初期状態ではdisplay: none;で非表示にしておきます。

<ul class="menu">
  <li>メニュー1</li>
  <li>
    メニュー2
    <ul class="menuSub">
      <li><a href="#">サブメニュー2-1</a></li>
      <li><a href="#">サブメニュー2-2</a></li>
    </ul>
  </li>
  <li>
    メニュー3
    <ul class="menuSub">
      <li><a href="#">サブメニュー3-1</a></li>
      <li><a href="#">サブメニュー3-2</a></li>
      <li><a href="#">サブメニュー3-3</a></li>
    </ul>
  </li>
</ul>

2.3 CSS

.menuSubのスタイルを設定し、.menuSub li aにはホバー時のスタイルを設定します。

.menuSub.openにdisplay: block;を設定し、.openクラスが付与された際に表示されるようにします。

.menuSub {
  display: none; /* 初期状態では非表示 */
  /* その他のスタイル設定 */
}

.menuSub.open {
  display: block; /* .openクラスが付与されたら表示 */
}

.menuSub li a:hover {
  /* ホバー時のスタイル設定 */
}

2.4 jQuery

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

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

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

3. まとめ

jQueryのslideUp()/slideDown()とaddClass()/removeClass()を使う2つの方法で、ドロップダウンメニューを実装する方法をご紹介しました。

アニメーション効果を付けたい場合はslideUp()/slideDown()、瞬時に表示/非表示を切り替えたい場合はaddClass()/removeClass()を使うと良いでしょう。

どちらの方法もシンプルで実装しやすいので、用途に合わせて使い分けてみてください。

ドロップダウンメニューとは？

  • ウェブサイトのナビゲーションでよく使われるUI要素
  • クリックまたはホバーすると、隠れていたメニュー項目が一覧表示される

jQuery を使うメリット

  • シンプルで直感的なコード
  • クロスブラウザ対応が容易
  • アニメーション効果を簡単に追加できる

実装方法

  1. HTML の準備

    • <ul> と <li> 要素を使ってメニュー構造を作成
    • ドロップダウン部分は子要素としてネストする
    
<nav>
  <ul>
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a>
      <ul class="dropdown">
        <li><a href="#">サブメニュー1</a></li>
        <li><a href="#">サブメニュー2</a></li>
      </ul>
    </li>
    <li><a href="#">メニュー3</a></li>
  </ul>
</nav>

  2. CSS で基本スタイルを設定

    • メニュー項目の配置、色、フォントなどを指定
    • ドロップダウン部分は初期状態では非表示にする
    
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

.dropdown {
  display: none;
  position: absolute;
}

  3. jQuery でドロップダウンの動作を実装

    • hover() や click() イベントを使って、マウスオーバーまたはクリック時にドロップダウンを表示
    • show() や slideDown() で表示アニメーションを追加
    
$(document).ready(function() {
  $('nav li').hover(function() {
    $(this).children('.dropdown').stop().slideDown();
  }, function() {
    $(this).children('.dropdown').stop().slideUp();
  });
});

カスタマイズ例

  • アニメーション効果を変更: fadeIn(), fadeOut(), animate() などを使って、より多彩なアニメーションを実現
  • レスポンシブ対応: メディアクエリを使って、画面サイズに合わせてメニューの表示を切り替え
  • CSS フレームワークとの統合: Bootstrap や Foundation など、既存のフレームワークと組み合わせてデザインを統一

まとめ

jQuery を使うことで、比較的簡単に美しいドロップダウンメニューを実装できます。この記事で紹介した基本的な実装方法を参考に、ぜひご自身のウェブサイトにも魅力的なナビゲーションメニューを追加してみてください。

関連記事

 よくある質問

質問 回答
ドロップダウンメニューが正しく表示されません。 HTML の構造、CSS の設定、jQuery のコードに誤りがないか確認してください。特に、要素のネストやクラス名の指定ミスに注意が必要です。
アニメーション効果が動作しません。 jQuery が正しく読み込まれているか、アニメーション効果を設定するコードが正しく記述されているかを確認してください。
モバイル端末でメニューが崩れてしまいます。 メディアクエリを使って、画面サイズに合わせてメニューの表示を切り替える必要があります。

その他の参考記事:jquery dropdownplain