WEB Tips デザイン・コーディング

jQuery無しCSSのみで作るドロップダウンメニュー

本記事にはプロモーションが含まれている場合があります。

jQuery無しCSSのみで作るドロップダウンメニュー

ドロップダウンメニューはナビゲーションによく使われるデザイン要素です。メニューが多階層にわたってたくさんある場合はメニュー構造を維持しながら効果的に見せることができます。

jQueryを使わなくてもCSSアニメーションを使えば軽快な動きで魅力的なナビゲーションが作れます。

この記事ではCSSだけで作るドロップダウンメニューのサンプルとその方法を簡単に説明します。

アニメーションなしのシンプルな縦型のドロップダウンメニュー

See the Pen CSSのみのドロップダウンメニューアニメなし by mixtaro (@mixtaro) on CodePen.

HTMLはulタグを使ったリストメニューです。子メニューにはhタグやimg画像を配置しています。

CSSは主要な部分のみ抜粋しています。

CSSは子メニューのコンテンツ<div class="childnav"></div>はdisplay:none/display:blockで表示非表示を制御しています。

ul.nav > li {
  position: relative;
}

ul.nav > li:hover .childnav {
  display: block;
  position: absolute;
  left: 100%;
  top: -1px;
  background: #6c969d;
}

.childnav {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
}

アニメーションをつけた縦型ドロップダウンナビゲーション

先程のドロップダウンメニューにホバーした時に子メニューがフワッと表示されるようにしてみました。

See the Pen CSSのみのドロップダウンメニューアニメーションあり by mixtaro (@mixtaro) on CodePen.

子メニューを表示する時、display:blockでは動きをつけることができないので、opacityvisibilityを使っています。

ホバーしていない時に子メニューがチラつくのを防ぐため、overflow:hiddenも設定しています。

縦型ドロップダウンナビゲーション2

吹き出し風の矢印と子メニューが表示される時にアニメーションをつけてみました。

See the Pen vertical dropdown nav by mixtaro (@mixtaro) on CodePen.

      .menu > li:hover > ul {
      	visibility:visible;
      	opacity:1;
      	left:100%;
      }
      
      .menu > li > ul {
      	position: absolute;
      	top: 0;
      	left: 90%;
      	padding: 0;
      	margin: 0;
      	list-style: none;
      	background-color: #00AFB9;
      	min-width: 200px;
      	z-index: 1;
      	box-shadow: 0 2px 5px rgba(0,0,0,0.5);
      	transition: all 0.2s ease-in-out;
      	visibility:hidden;
      	opacity:0;
      }

こちらもvisibilityとopacityを使ってアニメーションをつけています。

子メニューのulをleft:90%にして、visibility:hidden,opacity:0にして非表示の状態に。ホバーされたらleft:100%,visibility:visible, opacity:1にしてメニューの右端に表示されるようにします。

縦型ドロップダウンナビゲーションDEMO

レスポンシブな横並びのドロップダウンメニュー・モバイルではスライドダウンしてくるメニュー

PCでは横並びのナビゲーション、モバイルではスライドインするレスポンシブなナビゲーションです。

See the Pen Responsive dropdown menu by mixtaro (@mixtaro) on CodePen.

レスポンシブなドロップダウンメニュー DEMO

モバイル用のハンバーガーメニューの開閉にはJavaScriptを使っています。。。。(ハンバーガーメニューもCSSだけで実装できると思いますが)

// ハンバーガーメニューのクリックイベント
var navToggle = document.querySelector('.nav-toggle');
var navMenu = document.querySelector('.nav ul');
      
navToggle.addEventListener('click', function() {
      navToggle.classList.toggle('active');
      navMenu.classList.toggle('active');
});

上のサンプルではモバイルで見ると上からスライドするようにしていますがもう少し改善の余地があるかと。ナビゲーションの項目が多い場合、PCでの見せ方は横並びのナビゲーションで収まりよく配置できますが、モバイルの場合は工夫が必要ですね。

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大35%キャッシュバックで月額費用643円&ドメイン永久無料 - 2023年11月28日(月)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額643円 55%OFF - 2023年11月30日(木)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-,