JQueryでメガメニューを実装する方法【プラグインなし】

2020年3月11日

メガメニューとは、展開可能なメニューのことです。

だいたいはドロップダウン形式で、マウスをホバーすると内部メニューが出てきます。

例えば、慶應義塾大学病院ホームページの下記部分がメガメニューです。リンクから実際に確かめてみてください。

こちらはJQueryで簡単に作ることができるので、メモがてらに残しておきます。

サンプル




簡素ですが、上記がメガメニューです。コードは下記になります。

解説

CSS

CSSでは重要な部分が二つあります。

まず、ドロップダウンリストはデフォルトで非表示にしてある点です。

マウスをホバーした時に表示される挙動はJQueryでコントロールするので、display: none;だけでOKです。

次に、ドロップダウンリストをposition:absolute;にしてある点です。

これを忘れるとドロップダウンが表示された際にメガメニューがずれてしまうので、忘れずに書きましょう。

そしてposition:absolute;が適用されるには、親要素がpositon:relative;である必要があります。

なのでメガメニュー(.mega-menu)はposition:relativeにしてあります。

後の部分はデザインなので、適宜自由に変えてください。

JQuery

JQueryでは、メガメニューのli要素にホバーした時、子要素のドロップダウンリストが表示(slideDown)するようにしてあります。

そしてホバーが外れたら非表示(slideUp)するようにします。

リストとドロップダウンはそれぞれ3つありますが、ドロップダウンはメガメニューの子要素にしてあるので、$(this)でホバーしたli要素のドロップダウンのみを取得することができます。

クラスをそれぞれ分ける必要がなくなるので、便利ですね。

JQueryでは特にライブラリも使わず、これだけで簡単に実現できます。