スマホ用横から出るメニュー(改)

以前投稿した横から出るメニューの進化版みたいなものです。
スマホ用横から出るメニュー

横ナビ以外の領域をクリックまたはタップしたときに横ナビを閉じるようにしました。

HTML

<body>
<div class="l_nav">
    <nav class="nav">
        <ul class="nav_menu">
            <li>
                <div class="nav_list_inner">
                    <a href="">メニュー1</a>
                </div>
            </li>
            <li>
                <div class="nav_list_inner">
                    <a href="">メニュー2</a>
                </div>
            </li>
            <li>
                <div class="nav_list_inner">
                    <a href="">メニュー3</a>
                </div>
            </li>
            <li>
                <div class="nav_list_inner">
                    <a href="">メニュー4</a>
                </div>
            </li>
            <li>
                <div class="nav_list_inner">
                    <a href="">メニュー5</a>
                </div>
            </li>
        </ul>
    </nav>
</div>
<!-- div[side_nav] -->
<div class="on_wrap"></div>
<div class="wrap">
    <div class=" l_header">
        <div class="header_inner inner">
            <div class="sp sp_nav_btn">
                <img src="demo/sp_menu.jpg" alt="">
            </div>
            <div class="logo">
                <img src="demo/170110_img.jpg" alt="">
            </div>
        </div>
    </div>
    <!--l_header-->
    <div class="l_index">
        横から出るメニュー(改)
    </div>
    <div class="l_footer">

    </div>
</div>
</body>

CSS

.l_header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    -webkit-transition: .3s;
    transition: .3s
}

.l_header .header_inner {
    display: table;
    width: 100%;
    padding: 10px;
    background: #fff;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35);
    box-sizing: border-box
}


.l_header .sp_nav_btn {
    display: table-cell;
    width: 60px;
    height: 60px;
    vertical-align: middle;
    cursor: pointer
}
.l_header .logo{
    display: table-cell;
    padding: 0 10px;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}
.l_header .logo img{
    width: 100%;
    max-width: 233px;
}
.wrap {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    background: #ddd;
    -webkit-transition: .3s;
    transition: .3s
}

.on_wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-transition: .3s;
    transition: .3s;
    visibility: hidden
}

.is_active .l_header {
    left: 220px;
    -webkit-transition: .3s;
    transition: .3s
}

.is_active .wrap {
    left: 220px;
    -webkit-transition: .3s;
    transition: .3s
}

.is_active .on_wrap {
    position: fixed;
    left: 220px;
    width: 100%;
    height: 100%;
    z-index: 10000;
    overflow: hidden;
    visibility: visible;
    -webkit-transition: .3s;
    transition: .3s;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.35)
}

.is_active .l_nav {
    position: fixed;
    height: 100%;
    left: 0;
    overflow-y: auto;
    -webkit-transition: .3s;
    transition: .3s
}
.l_nav {
    background: #fff;
    width: 220px;
    height: 100%;
    position: fixed;
    top: 0;
    left: -220px;
    z-index: 1000;
    -webkit-transition: .3s;
    transition: .3s
}
.nav_menu{
    padding: 0;
    list-style: none;
}
.l_nav .nav_menu li {
    border-bottom: 1px solid #909090;
}

.l_nav .nav_menu a {
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    display: block;
    padding: 15px 0px 15px 15px;
    color: #333
}

.l_nav .nav_menu .nav_list_inner {
    position: relative
}
html{
    overflow: auto;
    height: 100%;
}
body{
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x:hidden;
}
.l_main{
    position: relative;
    height: 100%;
}
.l_index{
    padding: 90px 10px 0;
    font-size: 2rem;
}
.demo_post{
    position: relative;
    height: 100%;
    margin: 0 auto;
}

js(jQuery)

/*----------------------------------------------------------------------*/
/* sp_nav_menu
/*----------------------------------------------------------------------*/

$(function() {
    $(".sp_nav_btn").on("click",function(){
        $("body").toggleClass("is_active");
    });
    //on_wrapをクリックしたとき、クラスを削除
    $(".on_wrap").on("click",function(){
        $("body").removeClass("is_active");
    });

});

解説

以前と同じくjsはクリックしたときにclassを付けるようにしています。
class=”wrap”がスライドするのですが、その上に何でもよいので空のdiv(デモではon_wrap)を入れておき、z-indexを低く設定して重なり順を下にしておきます。これでon_wrapはクリックできません。
次にclass=”is_active”が付いた時にz-indexを高く設定し、重なり順を上にしてクリックできるようにします。
動きの部分はjsでcssをいじるかclassを付けるか毎回迷います。今回の場合はcssの差分書くの面倒くさかったので、jsですべて書けばよかったなあと思います。

デモページ

解説

Related article