dropdown-menu

2017.01.27

CSSのみでアニメーション付きのドロップダウンメニューを実装してみます。
メニューオープン動作に使用しているtransitionプロバティのサポートは下記
ベンダープレフィックスとして-webkit-をつけましょう。

HTMLソース

<div id="nav-menu">
<input id="dropdown" type="checkbox"  class="dropdown-toggle">
<label for="dropdown">クリックすると開くメニュー</label>
<ul class="dropdown-menu">
<li id="menu1"><a href="#">メニュー1</a></li>
<li id="menu2"><a href="#">メニュー2</a></li>
<li id="menu3"><a href="#">メニュー3</a></li>
<li id="menu4"><a href="#">メニュー4</a></li>
<li id="menu5"><a href="#">メニュー5</a></li>
</ul>
</div>

<label for="dropdown">クリックすると開くメニュー</label>

</ul>

</div>

CSS

#nav-menu label {
position: relative;
padding-left: 15px;
cursor: pointer;
}
/* 下矢印 */
#nav-menu label::before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: #5e5e5e transparent transparent transparent;
position: absolute;
top: 8px;
left: 0;
}
#nav-menu .dropdown-toggle:checked ~ ul {
    height: 150px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    padding: 15px 0 0 30px;
}
#nav-menu .dropdown-toggle ~ ul {
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    padding: 0 0 0 30px;
}
#nav-menu .dropdown-toggle {
    display: none;
}