jQuery: slideMenu

jQueryのslideToggleとtoggleClassを使って、スマホ用スライドメニューを作成します。
ライブラリはここからCDNで読み込みましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

[jQuery]

$(function () {
    $('#menu_toggle').click(function () {
        $(this).next('ul').slideToggle(200);
        $(this).toggleClass('active');
    });
    $(document).click(function() {
        $('#menu_toggle').removeClass('active');　//エリア外をクリックすると閉じる
    });
    $('#header').click(function() {
        event.stopPropagation();　//ヘッダー領域ではイベントを停止
    });
});

<nav id="slide_nav">
       <a id="menu_toggle" class="active"> <span></span> <span></span> <span></span> </a>
        <ul id="nav_menu">
          <li id="nav01"><a href="#">menu1</a></li>
          <li id="nav02"><a href="#">menu2</a></li>
          <li id="nav03"><a href="#">menu3</a></li>
          <li id="nav04"><a href="#">menu4</a></li>
          <li id="nav05"><a href="#">menu5</a></li>
          <li id="nav06"><a href="#">menu6</a></li>
        </ul>
 </nav>

/* Menu Button */
#menu_toggle {
    position: fixed;
    top: 34px;
    right: 10px;
    width: 40px;
    height: 34px;
}
#menu_toggle span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #333;
    border-radius: 4px;
}
#menu_toggle span:nth-of-type(1) {
    top: 0;
}
#menu_toggle span:nth-of-type(2) {
    top: 15px;
}
#menu_toggle span:nth-of-type(3) {
    bottom: 0;
}

/* Nav Menu */
#menu_toggle + #nav_menu {
    height: 100%;
    position: fixed;
    right: -240px;
    width: 240px;
    z-index: 999;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
#menu_toggle.active + #nav_menu {
    position: fixed;
    right: 0;
    width: 240px;
    background-color: rgba(0,0,0,0.8);
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}