開閉時にアイコンが回転するドロップダウンメニュー
スマホサイト等でつかえそうなドロップダウンメニューの実装方法の紹介です。
ダラダラとメニューを並べたくない時、見た目をスッキリさせたい時によくつかうのがドロップダウンメニューです。実装時に気を付けているのが、「押せる」ことが分かるようにすることです。まあ、当然ですが。
今回紹介するドロップダウンメニューであれば、ボタンの右端にアイコンが付いていて、そのアイコンがメニューの開閉に合わせてクルクル回転するのでユーザビリティ面でも良さそうです。
実装方法
html
今回のサンプルはFontAwesomeをつかっているので、FontAwesomeのCSSが別途必要です。
<ul class="dropdown"><li>sample
<i id="arrow" class="fas fa-caret-square-up"></i>
<ul class="submenu">
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
</ul>
</li></ul>CSS
#arrow{
width: 16px;
height: 16px;
fill: #fff;
position: absolute;
top: 15px;
right:15px;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
-o-transition: all .15s linear;
transition: all .15s linear;
}
.dropdown li{
list-style:none;
position:relative;
}
.submenu{
display:none;
}
.dropdown_toggle #arrow{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.dropdown{
width:100%;
padding:0;
background:#000;
color:#fff;
}
.dropdown>li{
padding:10px;
}
.submenu{
background:#777;
margin-top:10px;
padding:0;
}
.submenu a{
display:block;
color:#fff;
text-decoration:none;
padding:10px;
}
.submenu a:hover{
background:rgba(255,255,255,.1);
}javascript
jQueryで動作するので、こちらも別途jQuery本体が必要。
$(function(){
$('.dropdown>li').on('click', function(){
$(this).toggleClass('dropdown_toggle').children('.submenu').slideToggle(200);
});
});実装サンプル
See the Pen
LvzLYJ by keitasakurai (@mdesignyokohama)
on CodePen.
