スマーフォン用ドロップダウンメニュー

私の別の個人ブログで使用したスマーフォン用のドロップダウンメニュー。
メニューを下から閉じさせたかったがために面倒くさい書き方をしています。

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');
    	  });
      });

デモページ

  • コーダーのための計算機