スマーフォン用ドロップダウンメニュー
私の別の個人ブログで使用したスマーフォン用のドロップダウンメニュー。
メニューを下から閉じさせたかったがために面倒くさい書き方をしています。
HTML
<div class="nav_block">
<div class="nav_block_inner">
<nav class="nav">
<ul class="nav_list">
<li><a href="#">LIST1</a></li>
<li><a href="#">LIST2</a></li>
<li><a href="#">LIST3</a></li>
<li><a href="#">LIST4</a></li>
</ul>
</nav>
<div class="nav_menu">
menu
</div>
</div>
</div>
CSS
/*-------------------------------------------*/
/*nav
/*-------------------------------------------*/
.nav_menu{
display: block;
width: 100%;
padding: 5px 0;
text-align: center;
color: #fff;
font-size: 1.6rem;
background: #449865;
cursor: pointer;
}
.nav_menu:after{
content: "▲";
display: inline-block;
color: #fff;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:.3s;
transition:.3s;
}
/*.is_nav_activeが付いたとき三角形を180度回転させる*/
.nav_menu.is_nav_active:after{
content: "▲";
color: #fff;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
-webkit-transition:.3s;
transition:.3s;
}
.nav_menu.is_nav_active{
position: static;
}
.nav_block{
position: relative;
width: 100%;
text-align: center;
z-index: 10;
}
.nav_block_inner{
position: absolute;
top: 0;
height: 34px;
width: 100%;
-webkit-transition:.3s;
transition:.3s;
}
.nav_block_inner.is_nav_active{
-webkit-transition:.3s;
transition:.3s;
}
.nav{
display:none;
width: 100%;
background: #fff;
}
.nav_list>li{
text-align: center;
border-bottom: 1px solid #ddd;
}
.nav_list>li a{
display: block;
padding: 6px 0;
}Js(jQuery)
/*----------------------------------------------------------------------*/
/*nav_menu
/*----------------------------------------------------------------------*/
$(function(){
//.nav_menuをクリックしたとき
$(".nav_menu").on("click", function() {
//.navを表示させる
$(".nav").slideToggle();
//toggleClassで.nav_menuにclass名を付けたり消したりする
$(".nav_menu").toggleClass('is_nav_active');
$(".nav_block_inner").toggleClass('is_nav_active');
});
});
