ホバー・マウスオーバーでメニューを開く方法【JavaScript】【jQuery】
この記事は、最初の投稿から4年以上が経過しています。
最終更新から1458日が経過しています。
「ナビゲーションで隠れているサブメニューをマウスオーバーしたときに表示させたい」
「マウスオーバーしたときにメニューを表示させるにはどうしたらいいの?」
こういった悩みにお答えします。
マウスオーバーしたときにメニューを表示させるには、JavaScript、jQueryを使った方法があります。
jQueryを使ったほうが簡単に書くことができますが、読み込み速度が遅くなったり、動きがなめらかではなかったりするので、必要な条件にあわせて使い分けていくことが大事だと思います。
この記事では、以下のことがわかります。
- JavaScriptを使った方法
- jQueryを使った方法
記事を読み終えると、マウスオーバーしたときにサブメニューを表示させるいろいろな方法や特徴を理解することができます。
- 目次
マウスオーバーでサブメニューを表示する方法
JavaScript
マウスオーバーによる「active」の追加/削除をJavaScriptでコントロールします。
表示/非表示はCSSで調整します。
See the Pen javascript メニュー by hashi84 (@hashi84) on CodePen.
まず、JavaScriptを書く前にHTMLとCSSを準備します。
HTMLは一般的なナビのような感じ(ul、li)でコーディングします。
サブメニュー(.sub)に「active」というclassが追加されることを想定して、表示されるときの状態としてmin-heightを大きめに指定しておきます。
「transition: min-height 0.5s;」としておくことで、開閉するときの動きをなめらかにします。
サブメニュー(.sub)は、height、min-heightをゼロにして非表示にしておきます。
メニュー(.has-sub)にマウスオーバーしたとき、サブメニュー(.sub)に「active」を追加します。
- POINT
- JavaScriptを書く量が増えるが、jQueryを使わないので読み込み速度が速くなる。
jQuery (addClass / removeClass)
マウスオーバーによる「active」の追加/削除をJavaScriptでコントロールします。
表示/非表示はCSSで調整します。
See the Pen jQuery メニュー by hashi84 (@hashi84) on CodePen.
ネイティブJavaScriptと同じようにHTML、CSSを準備します。
高さがゼロのときは、「active」を追加して表示させます。
高さがゼロではないときは、「active」を削除して非表示にします。
- POINT
- classの追加/削除のみをjQueryで制御し、動きはCSS3のtransitionなのでなめらかに動く。
jQuery (slideDown / slideUp)
マウスオーバーによるslideDown(表示)/slideUp(非表示)をjQueryでコントロールします。
See the Pen jQuery2 メニュー by hashi84 (@hashi84) on CodePen.
サブメニュー(.sub)は、「display:none;」にして非表示にしておきます。
サブメニュー(.sub)が、表示されていなければスライドダウンで表示させます。
サブメニュー(.sub)が、表示されていればスライドアップで非表示にします。
- POINT
- slideDown/slideUpの動きが、CSS3のtransitionの動きよりややなめらかでない。
jQuery (slideToggle)
マウスオーバーによるslideToggle(表示/非表示)をjQueryでコントロールします。
See the Pen jQuery3 メニュー by hashi84 (@hashi84) on CodePen.
hoverのとき、表示させるか、非表示させるかを自動で判別してくれます。
- POINT
- slideToggleだけで表示/非表示をコントロールできるので簡単に書ける。
まとめ
マウスオーバーでサブメニューを表示する方法を紹介しました。
それぞれの特徴をまとめると、
- JavaScript … JavaScriptを書く量が増えるが、jQueryを使わないので読み込み速度が速くなる。
- jQuery (addClass / removeClass) … classの追加/削除のみをjQueryで制御し、動きはCSS3のtransitionなのでなめらかに動く。
- jQuery (slideDown / slideUp) … 動きがCSS3のtransitionの動きよりややなめらかでない。
- jQuery (slideToggle) … slideToggleだけで表示/非表示をコントロールできるので簡単に書ける。
簡単な方法から覚えていけばいいですが、応用が効かなかったり、複雑なサイトになると動作が重くなってきます。
慣れてきたら、徐々にJavaScriptで書けるようになっていくとレベルアップしていけます。
同じような機能ですが、アコーディオン(メニュー)を開閉する方法をこちらの記事で解説しています。
HTML、CSS、jQueryでアコーディオン(折りたたみ)をつくる
Webサイトにアコーディオン(折りたたみ)をつくる方法を知りたいですか?この記事では、HTML (details + summary)、CSS (checkbox + label)、jQuery(slideToggle、toggleClass)をつかってアコーディオン(折りたたみ)をつくる方法やそのメリット、デメリットを解説しています。ぜひご覧ください。