Having just started learning javascript, I've encountered a problem that has me stuck.
I recently stumbled upon a code snippet on W3 schools for creating an animated burger menu, which I thought was pretty cool. I successfully linked it to my side menu and got it to open up when clicked; however, the same button wouldn't close the menu.
To link my side menu, I added ;openSlideMenu() to the onclick function in the first div container.
My attempts to add a closing feature with ;closeSlideMenu() in the same container were unsuccessful. I believe this is because the name of the div container "burger-menu-btn" changes to "burger-menu-btn change" when clicked, as instructed by the toggle function.
<!-- 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').style.width = '100%';
}
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>
<a href="#" class="btn-close" onclick="closeSlideMenu()">×</a>
</div>
My main objective is:
To have the red "burger-menu-btn" open the slider "burger-menu", which it currently does.
and then have the transformed X close the same slider menu.
This way, I'll have a stylish, animated burger menu without needing the small makeshift "btn-close" button at the bottom of my navigation bar.
Fiddle link: https://jsfiddle.net/02rqy16f/
Thank you in advance for any help or advice; I apologize if I overlooked any key details.