ドロップダウンメニューはナビゲーションによく使われるデザイン要素です。メニューが多階層にわたってたくさんある場合はメニュー構造を維持しながら効果的に見せることができます。
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
では動きをつけることができないので、opacity
とvisibility
を使っています。
ホバーしていない時に子メニューがチラつくのを防ぐため、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
にしてメニューの右端に表示されるようにします。
レスポンシブな横並びのドロップダウンメニュー・モバイルではスライドダウンしてくるメニュー
PCでは横並びのナビゲーション、モバイルではスライドインするレスポンシブなナビゲーションです。

See the Pen Responsive dropdown menu by mixtaro (@mixtaro) on CodePen.
モバイル用のハンバーガーメニューの開閉には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での見せ方は横並びのナビゲーションで収まりよく配置できますが、モバイルの場合は工夫が必要ですね。