CSSでドロップダウンメニューってどう作るの？
そんな疑問にお答えします。
グローバルメニューなどではメニューの下層にさらにメニューがある場合があります。
これを多階層メニューと呼びます。
今回はこの多階層メニューをHTMLとCSSのみで実装していきます。
See the Pen
多階層メニュー by toshi (@toshi78)
on CodePen.
HTMLの多階層メニューの構造
まずはHTMLの構造を見ておきましょう。
多層階メニューも通常のメニューと同様ulタグとliタグでコーディングします。
<ul class="header-menu">
<li><a href="#">メニュー1</a>
<ul>
<li><a href="#">下層メニュー1</a></li>
<li><a href="#">下層メニュー2</a></li>
<li><a href="#">下層メニュー3</a></li>
</ul>
</li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>💡ポイント！ 下層のulタグはliタグの中に入れる
下層のulタグは下層メニューを入れたいliタグの中に入れ込みます。
CSSでの実装方法
a {
cursor: pointer;
text-decoration: none;
}
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
ul li a{
display: block;
color: #fff;
text-align: center;
padding: 15px;
transition: 0.3s;
}
.header-menu li a:hover{
opacity: 0.7;
}
.header-menu {
width: 100%;
display: flex;
}
.header-menu > li{
width: 33%;
}
.header-menu > li > a{
background-color: #333;
border-right: 1px solid #fff;
}
.header-menu > li > ul{
display: none;
}
.header-menu li:hover a + ul{
display: block;
}
.header-menu > li > ul > li > a{
background-color: #333;
border-top: 1px solid #fff;
}ホバー前、ホバー時の表示を入れることでドロップダウンメニューが表現できます。
.header-menu > li > ul{
display: none;
}
.header-menu li:hover a + ul{
display: block;
}通常時は下層メニューを隠しておき、マウスオーバーしたら表示される動きを書いています。
以上です。
投稿者 トシ
コメントを残す