JavaScript

【jQuery】ドロップダウンメニューを簡単に実装する【2つ】

【jQuery】ドロップダウンメニューを簡単に実装する【2つ】

この記事では、jQueryのslideUp/slideDownとaddClass/removeClassを使って、ドロップダウンメニューを簡単に実装する方法を2つご紹介します。

今回は、jQueryのslideUp/slideDownとaddClass/removeClassを使って、ドロップダウンメニューを簡単に実装する方法を2つご紹介します。

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のslideUp/slideDownとaddClass/removeClassを使って、ドロップダウンメニューを実装する方法をご紹介しました。

アニメーション的に動きを入れるか、瞬時に表示と非表示をするかによって今回ご紹介した2つの方法が参考になると思います。自由にカスタマイズして、ぜひ使い分けてみてください。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...

 

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