ハシウェブ

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

【JavaScript】マウスオーバーでサブメニューを表示する方法【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
jQueryを使うので書く量が少なくてわかりやすい。

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で書けるようになっていくとレベルアップしていけます。