menu-mobile

htmlllllll
<div class="click-mobile" id="menu">
  	<span></span>
</div>
jsssssssssss
//
// This is The Scripts used for Simply Theme
//
function main() {
  (function () {
    'use strict'
    //Script
    //-----------------------------------
    $(document).ready(function($){
      $('.click-mobile').click(function(){
        $('.head-menu').slideToggle(400);
        return false;
      });

      $("#menu").click(function () {
        $(this).toggleClass("active");
        $(".head-menu").toggleClass("active");
      });
    });

  }());
}
main();
csssssssssssssssssssssssssssss
/* click-mobile */
.click-mobile{
    position: relative;
    display: none;
	cursor: pointer;
}

.click-mobile span{
    background: #2a2929;
    height: 4px;
    width: 41px;
    display: block;
    position: relative;
    border-radius: 1px;
}

.click-mobile::before,
.click-mobile::after{
    content: ' ';
    height: 4px;
    width: 41px;
    background: #2a2929;
    position: absolute;
    transition: transform 0.3s;
    border-radius: 1px;
}

.click-mobile::before{
    top: -8px;
}

.click-mobile::after{
    bottom: -8px;
}

.click-mobile.active span {
    visibility: hidden;
    transition: transform 0.3s;
}

.click-mobile.active::before,
.click-mobile.active::after {
  content: "";
  position: absolute;
  width: 41px;
  height: 4px;
  background: #2a2929;
  top: 0;
  left: 0;
  transition: transform 0.3s;
  border-radius: 1px;
}

.click-mobile.active::before {
  transform: rotate(45deg);
}

.click-mobile.active::after {
  transform: rotate(-45deg);
}
/*  */
@media(max-width: 767px){
	.click-mobile{
		display: block;
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 9;
	}
	.head-menu{
		display: none;
	}
	.head-menu{
		position: absolute;
		top: 120px;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #fff;
		z-index: 10;
	}
	.head-menu ul{
		flex-direction: column;
		padding: 30px 20px;
	}
	nav.head-menu ul li a{
		text-align: center;
		margin: 0;
		padding: 5px 0;
		display: block;
	}
	nav.head-menu ul li a::after{
		display: none;
	}
}