<html>
    <body>
        <div class="wrapper">
            <header>
                <div class="container clearfix">
                    <div class="navIcon"><span></span></div>
                    <nav class="head-nav">
                        <ul class="clearfix">
                            <li>
                                <a href="#">Menu1</a>
                            </li>
                            <li>
                                <a href="#">Menu2</a>
                            </li>
                            <li>
                                <a href="#">Menu3</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </header>
            
            <footer>
            </footer>
        </div>
    </body>
</html>
body,ul{
    margin:0px;
    padding:0px;
}
/* $head naviIcon */
header{
    height: 100px;
    background-color:rgba(0,0,0,0.5);
}
header .navIcon{
    width:100px;
    height:100px;
    background-color:rgba(0,0,0,0.5);
    position:absolute;
    top:0px;right:0px;
    cursor:pointer;
}

header .navIcon span{
    display:block;
    width:60px;
    height:4px;
    background-color:#FFF;
    /*border:solid 2px #fff;*/
    margin:0 auto; 
    position:relative;
    top:48px;left:0px;
    transition: all cubic-bezier(.13,.58,0,1.04) .5s;
}

header .navIcon.open span{
    background: transparent;
}

header .navIcon span:before,
header .navIcon span:after{
    content:"";
    width:56px;
    border:solid 2px #fff;
    position:absolute;
    left:0px;
    transition:all cubic-bezier(.13,.58,0,1.04) .5s;
}

header .navIcon span:before{
    top:-20px;	
}

header .navIcon.open span:before{
    top: 0px;
    border-color: #FFF;
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    transform: rotate(225deg);	
}

header .navIcon span:after{
    top:20px;	
}

header .navIcon.open span:after{
    top: 0px;
    border-color: #FFF;
    -webkit-transform: rotate(-225deg);
    -moz-transform: rotate(-225deg);
    -ms-transform: rotate(-225deg);
    -o-transform: rotate(-225deg);
    transform: rotate(-225deg);
}

/* $head nav */
header .head-nav{
    display:none;
    width: 100%;
    position: absolute;
    top:100px;left:0px;
}

header nav ul{
    
}

header nav ul li{
    height:90px;
    color:#fff;
    box-sizing:content-box;
    font-size:36px;
    font-weight:bold;
    text-align:center;
    line-height:90px;
    background-color:rgba(0,0,0,0.9);
    position:relative;
    top:0px;left:0px;
    cursor:pointer;
    transition: all 0.5s ease;
}

header nav ul li:hover{
    background-color:rgba(0,0,0,0.8);
}

header nav ul li:before{
}

header nav li.sub-nav{
    cursor:default;
}

header nav ul li a{
    color: #FFF;
    font-size: 24px;
    text-decoration: none;
}
$(document).ready(function(){
    
    accordionMenuFn();
    function accordionMenuFn(){
        var $head = $("header");
        var $menu = $("header .navIcon");
        var cf = false

        $menu.on("click",function(){
            var mc = $("header .head-nav")	;

            if(cf == false){
                mc.not(":animated").slideDown(500,'easeOutExpo',function(){
                    cf = true;
                });
                $menu.not(":animated").addClass("open");
                $head.addClass("open");
            }else if(cf == true){
                mc.slideUp(500,'easeOutExpo',function(){
                    cf = false;
                    $head.removeClass("open");
                });
                $menu.removeClass("open");
            }

        })
    }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js