今回は、CSSだけでドロップダウンメニューを作る方法を解説していきます。
ドロップダウンメニューとは、メガメニューの小さいバージョンのメニューでマウスホバーするとメニューが出てくるデザインです。
メガメニューが知らない方はこちらをどうぞ。
【CSSだけでできる】メガメニューを作る方法【コピペOK】
【CSSだけでできる】メガメニューを作る方法【コピペOK】
具体的には、下記のような感じです。
完成イメージ
それでは、さっそくいきましょう!
スポンサーリンク
ドロップダウンメニューのHTMLコード
HTML
<nav> <ul class="menu"> <li> <a href="#">MENU1</a> <ul class="menu__child"> <li><a href="#">CHILD1</a></li> <li><a href="#">CHILD2</a></li> <li><a href="#">CHILD3</a></li> </ul> </li> <li> <a href="#">MENU2</a> <ul class="menu__child"> <li><a href="#">CHILD1</a></li> <li><a href="#">CHILD2</a></li> <li><a href="#">CHILD3</a></li> </ul> </li> <li> <a href="#">MENU3</a> <ul class="menu__child"> <li><a href="#">CHILD1</a></li> <li><a href="#">CHILD2</a></li> <li><a href="#">CHILD3</a></li> </ul> </li> <li> <a href="#">MENU4</a> <ul class="menu__child"> <li><a href="#">CHILD1</a></li> <li><a href="#">CHILD2</a></li> <li><a href="#">CHILD3</a></li> </ul> </li> </ul> </nav>
スポンサーリンク
ドロップダウンメニューのCSSコード
css
.menu { display: flex; width: 1000px; padding: 0; margin: 0 auto; } .menu > li { width: 25%; } .menu li { position: relative; list-style: none; } .menu li a { padding: 1em 1.5em; text-decoration: none; background: #000; text-align: center; display: block; color: #fff; } .menu a:hover{ background: #912323; } .menu__child li { height: 0; overflow: hidden; transition: 0.3s; } .menu ul { padding: 0; } .menu li:hover > ul > li { height: 3.2rem; overflow: visible; }
.menu a:hover
のbackgroundの#を「blue」や「white」にすると背景色を変えられます。
BoostNoteに保存しておくと便利
最後になりますが、今回のドロップダウンメニューの作り方を「BoostNote」に保存しておくと、後で使う時にいつでも引き出せるので超便利です。
詳しくはこちらの記事【神アプリ】web制作で使える便利ツールは、BoostNoteで決まりで解説しているので、読んでみてください。
[sc_blogcard url=”https://yuuuugablog.com/programming/boostnote”]今回は以上です!
参考になれば幸いです。