マウスオーバーで表示するjQueryのドロップダウンメニュー(レスポンシブ対応)

マウスオーバーでドロップダウンメニューを表示するjQueryのコードとCSSです。768px以下になるとスマホ表示となり、ハンバーガーメニュー内でドロップダウン無しで表示されるようになります。

1 サンプル
2 html
3 jQuery
4 CSS

サンプル

See the Pen ドロップダウンメニュー by ponzu (@ponzu) on CodePen.

html

クラス名 .dropdown をつけたものがドロップダウンメニューとして表示されるようになっています。

<header> <nav class="globalnav-wrap"> <h1>LOGO</h1> <div class="nav-button-wrap"> <div class="nav-button"> <span></span> <span></span> <span></span> </div> </div> <ul class="globalnav"> <li class="dropdown-btn"> メニュー１ <ul class="dropdown"> <li><a href="#">ドロップダウンメニュー</a></li> <li><a href="#">ドロップダウンメニュー</a></li> <li><a href="#">ドロップダウンメニュー</a></li> <li><a href="#">ドロップダウンメニュー</a></li> </ul> </li> <li class="dropdown-btn"> メニュー2 <ul class="dropdown"> <li><a href="#">ドロップダウンメニュー</a></li> <li><a href="#">ドロップダウンメニュー</a></li> <li><a href="#">ドロップダウンメニュー</a></li> <li><a href="#">ドロップダウンメニュー</a></li> </ul> </li> </ul> </nav> </header>

jQuery

jQueryはドロップダウンメニューの表示/非表示と、スマホ表示にした時のグローバルナビの開閉に分かれています。

// ドロップダウンメニュー $('.dropdown-btn').hover( function() { //カーソルが重なった時 $(this).children('.dropdown').addClass('open'); }, function() { //カーソルが離れた時 $(this).children('.dropdown').removeClass('open'); } ); // グローバルナビの開閉 $(function() { $('.nav-button-wrap').on('click', function() { if ($(this).hasClass('active')) { // スマホ用メニューが表示されていたとき $(this).removeClass('active'); $('.globalnav').addClass('close'); $('.globalnav-wrap , body').removeClass('open'); } else { // スマホ用メニューが非表示の時 $(this).addClass('active'); $('.globalnav').removeClass('close'); $('.globalnav-wrap , body').addClass('open'); } }); });

CSS

以下はグロナビの開閉とドロップダウンに必要な部分だけ抜き出しています。レイアウトのCSSは適宜調整してください。

ハンバーガーメニューのエフェクトはNx World様のコードを利用させていただいています。

header { width:80%; margin:0 auto; } .globalnav-wrap { font-size:16px; color:#fff; background:#333; display:flex; justify-content:space-between; } .globalnav { .dropdown-btn { position:relative; display:inline-block; padding:20px; cursor:pointer; &:hover { background:#666; } } .dropdown { z-index:1000; background:#666; position:absolute; left:0; top:55px; width:200px; padding:10px 20px; display:none; li { display:inline-block; margin:10px 0; a { color:#fff; } } } .nav-button-wrap, .open { display:block; } .close { display:block; } } @media screen and (max-width: 768px) { header { position:relative; width:100%; } .nav-button-wrap { display:block; position:absolute; right:0px; top:0px; z-index:1000; cursor: pointer; padding:15px; height:53px; } .globalnav { display:none; .close { display:none; } } .globalnav-wrap.open .globalnav { display:block; padding:40px 20px 0; position: fixed; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.9); width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; li { display:block; } li:hover { background:transparent; } .dropdown { display:block; position:static; background:transparent; } }

📎📎📎📎📎📎📎📎📎📎

BOT