[jQuery] メニューをhoverでドロップダウンする(失敗事例あり)

こんにちは。キョウタです。

サイトを作成する時に、かなりの確率で実装することになるメニューのhoverについて、記事にしました。

本記事は、次のような方に向けて書いています。

「jQueryでメニューをhoverした時にドロップダウンしたい。」

「ドロップダウンはするけど子メニューを認識しない。」

こういった方に向けた記事です。

そのままコピペでokですので、サクッといってみましょう！

1. hoverでプルダウンする時の正しいコード

HTML, CSS, jQueryのコードは次の通りです。

(黄色のハイライトは後で説明に使いますので、今は無視して進んでokです。)

↓のような動きを再現できます。

ホバーした時の動作

「コピペしてok！」という方は、この記事はここまでです！

ぜひCSSを整えて使用してみください！

コードを自分で書くという方は、htmlを書くときに<li>タグの構造に注意してください。

ハイライトした</li>の位置を<a>タグの下に持ってくるとjQueryは機能しませんので、要注意です。

サイトの配置が、メニューの下にコンテンツがある場合は、要注意です。

次の動画のように、子メニューを認識せず、hoverしたメニューが閉じてしまうことがあります。

プルダウンしたメニューが認識しない例

解決するには、CSSでz-indexを指定して要素の重なりの順番を調整してあげましょう！

ちなみに、下記の書籍は僕が愛用している本になります。

hoverだけでなく、色々な動きを簡単に実装できるように解説されていますので、興味ある方はどうぞ。

以上になります！

良いjQueryライフを！