Animasyonlu Hamburger Menüsü Yapma

<a class="hamburger menu-btn" href="javascript:void(0)"><span></span></a>

<div class="main-menu-wrap">
    <div class="main-menu">
        <a href="#">Home</a>
        <a href="#">About Us</a>
        <a href="#">Services</a>
        <a href="#">Blog</a>
        <a href="#">Get in Touch</a>
    </div>
</div>

$(function(){
             
    var clicked = 0;
    $('.menu-btn').click(function(e){
     
        var screen_height = $(window).height() - $('.mob-header').height();
         
        $(this).toggleClass('active');
        $('body').toggleClass('menu-active');
         
        if (clicked == 0) {
            $('.main-menu-wrap').height(screen_height);
            clicked = 1;
            return;
        }
         
        if (clicked == 1) {
            $('.main-menu-wrap').removeAttr('style');
            clicked = 0;
            return;
        }
         
    });
     
});

.hamburger {
    display: block;
    float: right;
    width: 28px;
    height: 27px;
    margin: 12px 0 0;
    position: relative;
    z-index: 999999;
}
 
.hamburger span {
    margin: -2px 0 0;
    position: absolute;
    top: 50%;
    width: 28px;
    height: 3px;
    background-color: #09c;
    display: none;
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s
}
 
.hamburger span {
    display: block
}
 
.hamburger span:before, .hamburger span:after {
    position: absolute;
    content: ''
}
 
.hamburger span:before, .hamburger span:after {
    width: 28px;
    height: 3px;
    background-color: #09c;
    display: block
}
 
.hamburger span:before {
    margin-top: -10px
}
 
.hamburger span:after {
    margin-top: 10px
}
 
.hamburger span:before {
    -webkit-transition-property: margin, -webkit-transform;
    -webkit-transition-duration: .2s;
    -webkit-transition-delay: .2s, 0s;
    -moz-transition-property: margin, -moz-transform;
    -moz-transition-duration: .2s;
    -moz-transition-delay: .2s, 0s;
    transition-property: margin, transform;
    transition-duration: .2s;
    transition-delay: .2s, 0s
}
 
.hamburger span:after {
    -webkit-transition-property: margin, -webkit-transform;
    -webkit-transition-duration: .2s;
    -webkit-transition-delay: .2s, 0s;
    -moz-transition-property: margin, -moz-transform;
    -moz-transition-duration: .2s;
    -moz-transition-delay: .2s, 0s;
    transition-property: margin, transform;
    transition-duration: .2s;
    transition-delay: .2s, 0s
}
 
.hamburger: hover {
    border: none
}
 
.hamburger.active span {
    background-color: rgba(0,0,0,0);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s
}
 
.hamburger.active span:before {
    margin-top: 0;
    -webkit-transform: rotate(45deg);
    -webkit-transition-delay: 0s, .2s;
    -moz-transform: rotate(45deg);
    -moz-transition-delay: 0s, .2s;
    transform: rotate(45deg);
    transition-delay: 0s, .2s
}
 
.hamburger.active span:after {
    margin-top: 0;
    -webkit-transform: rotate(-45deg);
    -webkit-transition-delay: 0s, .2s;
    -moz-transform: rotate(-45deg);
    -moz-transition-delay: 0s, .2s;
    transform: rotate(-45deg);
    transition-delay: 0s, .2s
}
 
.main-menu-wrap {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: 70px;
    background: #09c;
    height: 0;
    overflow: auto;
    text-align: center;
    transition: height 0.6s cubic-bezier(0.5, 1, 0.22, 1);
    -webkit-transition: height 0.6s cubic-bezier(0.5, 1, 0.22, 1);
}
 
.main-menu {
    opacity: 0;
    padding-top: 50px;
    transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
}
 
.menu-active .main-menu {
    opacity: 1;
    transition: opacity 0.2s 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s 0.2s ease-in-out;
}
 
.main-menu a {
    color: #fff;
    display: block;
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 10px;
    text-decoration: none;
}
 
.main-menu a:hover, .main-menu a:active {
    color: #004d67;
}