jQueryで簡単実装！ホバーでスライド表示するドロップダウンメニューの作り方

jQuery ホバースライド

本記事では、jQueryを使って、マウスホバーで滑らかにスライド表示するスタイリッシュなドロップダウンメニューを実装する方法を解説します。初心者の方でも分かりやすく、コピペで動くサンプルコード付きで解説していきます。

なぜjQueryを使うのか？

jQueryは、JavaScriptをより簡潔に記述できるようにしたライブラリです。ドロップダウンメニューを実装する際にjQueryを使うメリットは以下の点が挙げられます。

JavaScriptだけで実装するよりもシンプルで分かりやすいコードで実現できる
豊富なプラグインを活用することで、さらに簡単に高度なアニメーションを実装できる
クロスブラウザ対応が容易

基本的なスライドドロップダウンメニューの実装方法

まずは、基本的なスライドドロップダウンメニューの実装方法を見ていきましょう。

HTMLの記述例

リスト構造(ul, li)を用いて、ドロップダウンメニューの構造を作成します。分かりやすいクラス名を付けるように心がけましょう。


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

CSSの記述例

初期状態ではサブメニューは非表示にし、ホバー時にアニメーションで表示されるように設定します。 transitionプロパティを使うことで、スムーズなスライドアニメーションを実現できます。


<style>
.main-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav > li {
  display: inline-block;
  position: relative;
}

.sub-menu {
  display: none; /* 初期状態では非表示 */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sub-menu li {
  width: 200px; /* サブメニューの幅 */
}

.sub-menu a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
}

.main-nav li:hover > .sub-menu {
  display: block;
}

/* スライドアニメーションの設定 */
.sub-menu {
  overflow: hidden;
  transition: height 0.3s ease; /* 高さの変化を0.3秒かけて滑らかに */
  height: 0; /* 初期状態では高さを0にする */
}

.main-nav li:hover > .sub-menu {
  height: auto; /* ホバー時は高さを自動調整 */
}
</style>

jQueryの記述例

hover()メソッドを使って、マウスが要素の上に乗った時と離れた時のイベントを設定します。 slideDown(), slideUp()メソッドを使うことで、要素をアニメーションしながら表示、非表示にすることができます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
  $('.main-nav > li').hover(function() {
    // マウスが乗った時
    $(this).children('.sub-menu').slideDown(); // サブメニューをスライドダウンで表示
  }, function() {
    // マウスが離れた時
    $(this).children('.sub-menu').slideUp(); // サブメニューをスライドアップで非表示
  });
});
</script>

さらに使いやすく！応用編

基本的なスライドドロップダウンメニューが実装できたところで、さらに使いやすくするための応用編を見ていきましょう。

遅延効果の実装

delay()メソッドを使うことで、アニメーションの開始を遅らせることができます。これにより、より自然なアニメーションを実現できます。


$(function() {
  $('.main-nav > li').hover(function() {
    $(this).children('.sub-menu').delay(200).slideDown(); // 0.2秒遅らせてスライドダウン
  }, function() {
    $(this).children('.sub-menu').slideUp();
  });
});

イージング効果の実装

easingプロパティを使うことで、アニメーションの緩急を調整することができます。jQuery UIなどのライブラリを使うと、より多彩なイージング効果を実現できます。


// jQuery UIのeasingを読み込む必要がある
$(function() {
  $('.main-nav > li').hover(function() {
    $(this).children('.sub-menu').slideDown({ easing: "easeOutExpo", duration: 500 }); // イージング効果を適用
  }, function() {
    $(this).children('.sub-menu').slideUp({ easing: "easeOutExpo", duration: 500 }); // イージング効果を適用
  });
});

まとめ

本記事では、jQueryを使ってスライド表示するドロップダウンメニューの実装方法について解説しました。jQueryを使うことで、比較的簡単にスタイリッシュなドロップダウンメニューを実装することができます。遅延効果やイージング効果などを組み合わせることで、さらに使いやすく、印象的なドロップダウンメニューを作成することが可能です。ぜひ、本記事を参考に、自分好みのドロップダウンメニューを作成してみてください！

なお、本記事ではこちらの記事を参考にさせていただきました。より詳しく知りたい方は、ぜひ参照してみてください。

よくある質問

Q1. jQueryを使わずに実装することはできますか？

A1. はい、可能です。ただし、JavaScriptだけで実装する場合、コードが複雑になりがちで、クロスブラウザ対応なども考慮する必要があります。jQueryを利用することで、よりシンプルに実装することができます。

Q2. モバイル対応はどのようにすれば良いですか？

A2. タッチイベントに対応する必要があります。 clickイベントなどを利用して、モバイル端末でも問題なく動作するように実装する必要があります。

Q3. ドロップダウンメニューの表示位置を調整したい場合はどうすれば良いですか？

A3. CSSで調整できます。 positionプロパティやtop, leftプロパティなどを利用して、任意の位置に調整してください。

その他の参考記事:jquery dropdownplain