【jQuery】ホバーでスライドするドロップダウンメニューの作り方

この記事では、jQueryを使って｢メニューをホバーしたときにサブメニューがスライド表示されるドロップダウンメニューの作り方｣をハンズオン形式で解説します。

jQueryでドロップダウンメニューをスライド表示する
【jQuery】ホバーでスライドするドロップダウンメニューの作り方
- HTML・CSS
- jQuery
まとめ

jQueryでドロップダウンメニューをスライド表示する

見本はこちらです。

各メニューをホバーすると、対応のサブメニューがヌルッとスライド表示されるのがわかると思います。

見た目はHTMLとCSSで整え、｢ホバーしたときにスライドする｣の部分をjQueryで制御しています。

See the Pen ホバーで開閉するドロップダウンメニュー by たけち (@kwxteqls-the-scripter) on CodePen.

こちらの作り方を解説します。

【jQuery】ホバーでスライドするドロップダウンメニューの作り方

jQueryを使って、メニューをホバーしたときにサブメニューがスライド表示されるドロップダウンメニューを作ってみましょう。

まずは、全体の骨組みとなるHTMLとCSSからです。

HTML・CSS

コードはこちらです。

HTML

<nav>
  <ul class="menu">
    <li class="menu-item"><a href="#">MENU A</a>
      <ul class="subMenu">
      <li class="subMenu-item"><a href="#">A-1</a></li>
      <li class="subMenu-item"><a href="#">A-2</a></li>
      <li class="subMenu-item"><a href="#">A-3</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="#">MENU B</a>
      <ul class="subMenu">
      <li class="subMenu-item"><a href="#">B-1</a></li>
      <li class="subMenu-item"><a href="#">B-2</a></li>
      <li class="subMenu-item"><a href="#">B-3</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="#">MENU C</a>
      <ul class="subMenu">
        <li class="subMenu-item"><a href="#">C-1</a></li>
        <li class="subMenu-item"><a href="#">C-2</a></li>
        <li class="subMenu-item"><a href="#">C-3</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="#">MENU D</a>
      <ul class="subMenu">
        <li class="subMenu-item"><a href="#">D-1</a></li>
        <li class="subMenu-item"><a href="#">D-2</a></li>
        <li class="subMenu-item"><a href="#">D-3</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

.menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.menu-item a,
.subMenu-item a{
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 1em 0;
  background-color: #0082B2;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}
.menu-item {
  position: relative;
}
.menu-item:not(:first-of-type) {
  border-left: 2px solid #fff;
}
.subMenu-item {
  border-top: 2px solid #fff;
}
.subMenu {
  position: absolute;
  width: 100%;
  display: none;
}
a:hover {
  color: #ffc800;
}

ポイント解説

ドロップダウンメニューを作る上でのポイントは、親メニューの中にサブメニューを入れるという点です。

コードを見ると、親メニューの<li>（クラス名：menu-item）の中に、サブメニューの<ul>（クラス名：subMenu）が丸ごと入っているのがわかります。

なお、親メニューは必ずしも<a>タグで囲む必要はありません。遷移先がなければ<li>タグだけでOKです。この辺りはプロジェクトに合わせて変更してください。

HTML

<li class="menu-item"><a href="#">MENU A</a>
  <ul class="subMenu">
  　<li class="subMenu-item"><a href="#">A-1</a></li>
 　 <li class="subMenu-item"><a href="#">A-2</a></li>
  　<li class="subMenu-item"><a href="#">A-3</a></li>
  </ul>
</li>

サブメニュー（subMenu）はposition:absolute;で絶対配置します。

親メニュー（menu-item）をposition:relative;とし、サブメニュー（subMenu）の幅を100%とすることで、画面幅が変わっても親メニューとサブメニューの幅が同じになるようスタイリングしています。

なお、サブメニューは初期段階で非表示（display:none;）にしましょう。こちらはjQueryで表示⇔非表示を切り替えます。

CSS

.menu-item {
  position: relative;
}
.subMenu {
  position: absolute;
  width: 100%;
  display: none;
}

jQuery

jQueryのコードはこちらです。

jQuery

$(function() {
  $('.menu-item').hover(function() {
    $(this).children('.subMenu').stop().slideToggle(500);
  });
});

解説

まずは｢ホバーした時に○○する｣というトリガー部分を記述しましょう。

ホバーの対象は親メニューなので、主語は$('.menu-item')ですね。これで｢親メニュー（menu-item）をホバーしたら｣の部分が出来上がります。

ちなみに、クラス名の場合は最初に｢.（ピリオド）｣を付けるのを忘れないようにしてください。

jQuery

$(function() {
  $('.menu-item').hover(function() {
    //処理内容
  });
});

次に処理の対象です。

ホバーしたときに表示させる対象はサブメニューなので、主語は$('.subMenu')だと思うかもしれません。

しかし、今回$('.subMenu')と書くと全てのサブメニューが開いてしまうので、この書き方は適切ではありません。

そこで｢ホバーした親メニューの子要素のサブメニュー｣という書き方をします。

｢ホバーした親メニュー｣は$(this)と書き換えることができるので、コードは次のようになります。

$(function() {
  $('.menu-item').hover(function() {
    $(this).children('.subMenu')　～
  });
});

最後に、処理の内容です。

現在display:none;でsubMenuが非表示になっているので、jQueryでdisplay:block;にしてもよいのですが、下のように表示⇔非表示がパッ、パッと切り替わり、あまりお洒落ではありません。

See the Pen ホバーで開閉するドロップダウンメニュー（NG） by たけち (@kwxteqls-the-scripter) on CodePen.

そこでslideToggle( )というメソッドを使うと、滑らかにスライドするアニメーションを実現できて便利です。

ちなみに、( )内にはアニメーションの速度をミリ秒で自由に指定できます。

slideToggle(ミリ秒): ：セレクタで指定した要素がスライドしながら開閉する

今回は｢500ミリ秒｣にしてみました。

$(function() {
  $('.menu-item').hover(function() {
    $(this).children('.subMenu').slideToggle(500);
  });
});

See the Pen ホバーで開閉するドロップダウンメニュー（stopメソッドなし） by たけち (@kwxteqls-the-scripter) on CodePen.

良い感じになったのですが、親メニューを連続でホバーすると同じ回数だけサブメニューが開閉を繰り返してしまう（アニメーションの重複）ので、このエラーを解決して終わりにしましょう。

アニメーションの重複を防ぐにはstop( )メソッドを使います。

stop( ): ：アニメーションが実行中のときは、それを中止する

stop( )はslideToggle( )の前に付ければOKです。

$(function() {
  $('.menu-item').hover(function() {
    $(this).children('.subMenu').stop().slideToggle(500);
  });
});

これでjQueryを使ったドロップダウンメニューが完成しました。

See the Pen ホバーで開閉するドロップダウンメニュー by たけち (@kwxteqls-the-scripter) on CodePen.

まとめ

親メニューに紐付いたサブメニューの実装は、実務でもかなりの頻度で登場します。

jQueryを使えば簡単にドロップダウンメニューを作成できるので、この機会にポイントを押さえておきましょう。