A dropdown mobile menu for web

html

<div class="container center " onclick="myFunction(this)" >
        <div class="bar1"></div>
        <p class="bar2">menu</p>
        <div class="bar3"></div>
      </div>
      <ul id ="mobile-menu" class="menu-hidden">
        <li><a>item 1</a></li>
        <li><a>item 2</a></li>
        <li><a>item 3</a></li>
      </ul>

script.js

function myFunction(x) {
  x.classList.toggle("change");

  $("#mobile-menu").toggleClass("menu-hidden", 800, "easeOutQuint");
};

style.css

* {
  margin: 0;
  padding: 0;
}
html body {
  margin: 0;
  padding: 0;
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
  background-color: #F4F4F4;
  font-family: 'Raleway', sans-serif;
}
a{
  text-decoration: none;
}
ul{
  padding: none;
}


/*============================== Hamburger Menu ============================*/
.container {
  display: block;
  position: absolute;
  text-align: center;
  margin: 0 auto;
  z-index: 1;
  padding: .5em;
  padding-left: 0em;

  width:100%;
  background-color: white;
}


/* Style Hamburger*/
.bar1, .bar3 {
  display: inline-block;
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
.bar2{
  vertical-align: middle;
  height: 5px;
  font-size: 1.2em;
  margin-top: -15px;
  margin-bottom: 11px;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}
/*========= Mobile Menu ==================*/
#mobile-menu{
  position: absolute;
  text-align: center;
  list-style: none;
  background: tomato;
  width: 100%;
  color: white;
  padding-top: 3.9em;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .0), 0 6px 6px rgba(0, 0, 0, 0.1);
}
#mobile-menu ul{
  margin: none !important;

}
#mobile-menu li{
  margin: none !important;
}
#mobile-menu li a{
  border-style: solid;
  border-top:  solid #FF836D;
  border-left-style: none;
  border-bottom: none;
  display:inline-block;
  padding-top: 1em;
  padding-bottom: 1em;
  width: 100%;
  color: white;
}
#mobile-menu li a:hover{
  transition: background-color 0.6s ease;
  background: #D9391C;

}
.menu-hidden{
  margin-top: -11em;
}