【コピペでできる】CSSでドロップダウンメニューを作る方法

【コピペでできる】CSSだけでドロップダウンメニューを作る方法

こんにちは、ゆうが(@yuuuugablog)です。

今回はwebサイトで頻繁に使われている、CSSでドロップダウンメニューを作る方法を解説していきます。

ドロップダウンメニューとは?
ドロップダウンメニューとはメガメニューの小さい版で、マウスホバーするとメニューが出てくるデザインのこと。

具体的には、下記のような感じです。

完成イメージ

CSSだけでドロップダウンメニューを作る方法

メガメニューが知らない方は、こちらで解説しているので見てみて下さい。

【CSSだけ】メガメニューを簡単に作る方法【コピペOK】【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>

まずはこちらのコードをコピペして、HTMLファイルのほうに貼り付けて下さい。

ドロップダウンメニューの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;
}
MEMO
.menu a:hoverのbackgroundの#を「blue」や「white」にすると背景色を変えられます。

ゆうが

たったこれだけでドロップダウンメニューをつくることができます!

スポンサーリンク

BoostNoteに保存しておくと便利

BoostNoteの保存しておくと、便利

最後になりますが、今回のドロップダウンメニューの作り方を「BoostNote」に保存しておくと、後で使う時にいつでも引き出せるので非常に便利です。

詳しくはこちら【完全無料】BoostNoteの特徴や使い方を解説で解説しているので、読んでみてください。

BoostNoteは毎回使うコードを登録することができるので、パッと引き出せてコピペするだけで作れちゃいます。

なのでエンジニアの方には絶対おすすめするソフトです。