jQueryを使ったマウスオーバー時のドロップダウンメニュー制御

概要

本記事では、jQuery を用いて、マウスオーバー時にドロップダウンメニューを表示し、マウスが離れると自動的に非表示にするスクリプトを解説します。特に、マウスが一時的に離れた場合でも誤ってメニューが閉じないようにする処理を組み込んでいます。

---

コードの説明

1. マウスが .js-sp-accordion に入ると、親要素に .__open クラスを追加

jsコピーする編集するjQuery('.js-sp-accordion').mouseenter(function() {
  jQuery(this).closest('.c-submenu__item').addClass('__open');
  jQuery(this).closest('.c-submenu__item').find('.c-submenu__item--dropdown').show();
});

• .js-sp-accordion にマウスが入ると、その親要素 .c-submenu__item に .__open クラスを追加。
• さらに、子要素の .c-submenu__item--dropdown を show() で表示。

2. マウスが .js-sp-accordion または .c-submenu__item--dropdown から離れると .__open クラスを削除

jsコピーする編集するjQuery('.js-sp-accordion, .c-submenu__item--dropdown').mouseleave(function() {
  var $submenuItem = jQuery(this).closest('.c-submenu__item');
  
  setTimeout(() => {
    if (!$submenuItem.find('.c-submenu__item--dropdown:hover').length && !jQuery('.js-sp-accordion:hover').length) {
      $submenuItem.removeClass('__open');
      $submenuItem.find('.c-submenu__item--dropdown').hide();
    }
  }, 300);
});

• .js-sp-accordion または .c-submenu__item--dropdown からマウスが離れると、親 .c-submenu__item を取得。
• すぐに .__open を削除するのではなく、300ミリ秒の遅延を設定。
• hover 状態の要素がない場合のみクラスを削除し、メニューを閉じる。

---

ポイント

1. mouseenter と mouseleave を利用
   hover() ではなく、mouseenter / mouseleave を使うことで、イベント処理を細かく制御。
2. 一定時間（300ミリ秒）の遅延処理
   • メニューから一瞬マウスが外れてもすぐには閉じないように工夫。
   • ユーザーが操作しやすいように配慮。
3. マウスがメニュー内に残っている場合は閉じない処理
   • hover 状態をチェックし、メニュー内部にマウスがある場合は閉じない。

---

まとめ

このスクリプトを導入することで、スマホメニューやナビゲーションメニューのホバー時の挙動をスムーズにし、使いやすいUIを実現できます。特に、誤操作を防ぐための遅延処理を入れることで、ユーザーにストレスのない動作を提供可能です。

今後、クリックで開閉する機能や、タッチデバイス対応なども追加すると、さらに汎用性の高いメニュー実装ができます。