このページの目的
ヘッダーのナビゲーションメニューなどで、特定の項目にマウスを乗せたりクリックしたりすると、その下にサブメニューがスッと表示される「ドロップダウンメニュー」の実装方法を学びます。
多くのリンクを、すっきりと整理して見せたい場合に非常に有効なテクニックです。
smart_display動作サンプル
実際に動作するサンプルです。「サービス」の項目をクリックすると、サブメニューが開閉します。
このサンプルを実装するためのHTMLとCSSのコードは以下の通りです。
code実装コード解説
1. HTMLの構造
<li>の中に、さらに<ul class="submenu">を入れるのがポイントです。
<nav class="global-nav">
<ul class="main-menu">
<li><a href="#">ホーム</a></li>
<li class="has-submenu">
<a href="#">サービス</a>
<!-- ▼サブメニュー -->
<ul class="submenu">
<li><a href="#">サービスA</a></li>
<li><a href="#">サービスB</a></li>
</ul>
</li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>2. CSSのスタイル
positionプロパティと、opacity, visibilityの切り替えが鍵となります。
/* サブメニューを持つliを基準点に */
.has-submenu {
position: relative;
}
/* サブメニューのスタイル */
.submenu {
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
list-style: none;
padding: 0;
margin: 10px 0 0;
z-index: 10;
/* 普段は非表示 */
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.3s, transform 0.3s, visibility 0s 0.3s;
}
/* ★親メニューがis-openになったら、サブメニューを表示 */
.has-submenu.is-open > .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.3s, transform 0.3s, visibility 0s 0s;
}