ホバー・マウスオーバーでメニューを開く方法【JavaScript】【jQuery】
この記事は、最初の投稿から4年以上が経過しています。
最終更新から1464日が経過しています。
「ナビゲーションで隠れているサブメニューをマウスオーバーしたときに表示させたい」
「マウスオーバーしたときにメニューを表示させるにはどうしたらいいの？」
こういった悩みにお答えします｡
マウスオーバーしたときにメニューを表示させるには､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）をつかってアコーディオン（折りたたみ）をつくる方法やそのメリット、デメリットを解説しています。ぜひご覧ください。
