My problem

explained on stackoverflow

by Cong Nguyen

HTML

<!-- Burger menu icon and animation -->
	<div class="burger-menu-btn" onclick="myFunction(this); openSlideMenu();">
		<div class="burger-menu-bar-1"></div>
		<div class="burger-menu-bar-2"></div>
		<div class="burger-menu-bar-3"></div>
	</div>

	<script>
		function myFunction(x) {
			x.classList.toggle("change");
		}
		
		function openSlideMenu(){
			document.getElementById('burger-menu').classList.toggle("open");
		}
	
		function closeSlideMenu(){
			document.getElementById('burger-menu').style.width = '0px';
		}
	</script>
	
	<div id="burger-menu" class="side-nav">
		<a href="index.html">Home</a>
		<a href="cases.html">Basic // GF2 </a>
		<a href="#">Null</a>
		<a href="#" >Null</a>
		<a href="#">Null</a>
		<!--  "btn-close" here is my old way of closing this menu, i am not happy with it at all.
		which is why i want to close this menu, with the same button that opens it above-->
		<a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a> 
	</div>

CSS

/* ----- Burger menu styling ----- */
	.burger-menu-btn {
		float: right;
		margin-top: 12px;
		margin-right: 20px;
		display: inline-block;
		cursor: pointer;
	}
	
	.burger-menu-bar-1,
	.burger-menu-bar-2,
	.burger-menu-bar-3 {
		width: 35px;
		height: 5px;
		background: red;
		margin: 6px 0;
		transition: 400ms;
	}
	
	.change .burger-menu-bar-1{
		-webkit-transform: rotate(-45deg) translate(-9px, 6px);
		transform: rotate(-45deg) translate(-9px, 6px);
	}

	.change .burger-menu-bar-2 {opacity: 0;}

	.change .burger-menu-bar-3 {
  		-webkit-transform: rotate(45deg) translate(-8px, -8px);
  		transform: rotate(45deg) translate(-8px, -8px);
	}
	
	.open-slide { /*Burger btn*/
    float: right;
	z-index: 1;
	padding-top: 20px;
	padding-right: 30px;
}

.side-nav {
	letter-spacing: 1px;
	text-align: center;
    height: 100%;
    width: 0%;
    position: fixed;
	z-index: -1;
	right: 0;
    background: #303030;
    overflow-x: hidden;
    padding-top: 45px;
	transition: 300ms;
}

.side-nav a {
	text-transform: uppercase;
    text-decoration: none;
    padding: 3% 10px 30px 30px;
    font-size: 24px;
    color: #f1f1f1;
    display: block;
	transition: 300ms;
}	

.side-nav a:hover {
	letter-spacing: 2px;
    color: #f1f1f1;
}
#burger-menu{
  width: 0%;
}
#burger-menu.open{
  width: 100%;
}