mobile menu

HTML

<button id="openMenu">Menu</button>
<nav id="mobileMenu">
	<ul>
		<li>Home</li>
		<li>About</li>
		<li>Contact</li>
	</ul>
</nav>

CSS

body{
	max-width: 1000px;
	margin: 0 auto;
	background-color: #333333;
}

nav ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin:0;
}
#mobileMenu{
	display: none;
	animation: shows .3s linear;
}
li{
	color: #fff;
font-size: 30px;
text-align: center;
margin:5px;
font-weight: bold;
transition: all .3s;
border:2px solid transparent;
}
li:hover{
	color:#333;
	cursor: pointer;
	transition: all .3s;
	background-color: #fff;
	border:2px solid #fff;
}

#openMenu{
display: none;
font-size: 30px;
padding: 5px;
margin:0;
color:#fff;
background-color: lightSkyBlue;
cursor: pointer;
border: none;
transition: all .3s;
outline: none;
 }
 #openMenu:hover{
 background-color: #fff;
 color: #333;
box-shadow: 0px 0px 10px 3px tomato;
transition: all .3s;
 }
@media screen and (max-width: 500px){
	#openMenu{
		display: block;
	}
}

@keyframes  shows {
	0% {
		opacity: 0;
	    transform: scale(1.1);
	}
	100%{
		opacity: 1;
	}
}

JavaScript

var btn = document.getElementById('openMenu');
var menu = document.getElementById('mobileMenu');
var count = 10;
btn.onclick = function(){
  if(count % 2 == 0){
  	menu.style.display = 'block'
  	count++;
  } else {
  	menu.style.display = 'none';
  	count = 10;
  }
}