ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

ホバー・マウスオーバーでメニューを開く方法【JavaScript】【jQuery】

ホバー・マウスオーバーでメニューを開く方法【JavaScript】【jQuery】

「ナビゲーションで隠れているサブメニューをマウスオーバーしたときに表示させたい」

「マウスオーバーしたときにメニューを表示させるにはどうしたらいいの?」

悩み

こういった悩みにお答えします。

マウスオーバーしたときにメニューを表示させるには、JavaScript、jQueryを使った方法があります。

jQueryを使ったほうが簡単に書くことができますが、読み込み速度が遅くなったり、動きがなめらかではなかったりするので、必要な条件にあわせて使い分けていくことが大事だと思います。

この記事では、以下のことがわかります。

  • JavaScriptを使った方法
  • jQueryを使った方法

記事を読み終えると、マウスオーバーしたときにサブメニューを表示させるいろいろな方法や特徴を理解することができます。

目次
  1. マウスオーバーでサブメニューを表示する方法
    1. JavaScript
    2. jQuery (addClass / removeClass)
    3. jQuery (slideDown / slideUp)
    4. jQuery (slideToggle)
  2. まとめ

マウスオーバーでサブメニューを表示する方法

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)をつかってアコーディオン(折りたたみ)をつくる方法やそのメリット、デメリットを解説しています。ぜひご覧ください。