How can i use the same button to open and close my burger menu?

Question

I am a complete beginner when it comes to javascript, and i've hit a brick wall.

I found this small bit of code on W3 schools about how to create a animated burger menu, which looks cool, and i've managed to link it to my side menu, so it succesfully opens it up.. however the same button wont close the menu.

I managed to link my side menu by adding ;openSlideMenu() to my onclick function in first div container.

I tried adding a closing feature by using ;closeSlideMenu() in that same container without any luck, my assumption to why this is not working is because the name of the div container "burger-menu-btn" changes to "burger-menu-btn change" when you click on it, as the toggle function tells it to do.

<!-- 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()">&times;</a> 
    </div>  

My final goal here is to:

Make the red "burger-menu-btn" open the slider "burger-menu", which it already does.

then make the red transformed X close the same slider menu.

So i will end up with a good looking burger menu, thats animated, and i can finally remove the small makeshift "btn-close" button in the bottom of my navigation bar.

heres the fiddle https://jsfiddle.net/02rqy16f/

thanks in advance, im sorry if i missed anything crucial.

Answer 1

the opening and closing button are the some button. so you need to toggle the menu when clicking (open/close) button:

<div class="burger-menu-btn" onclick="myFunction(this); toogleSlideMenu(this);">
    <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 toogleSlideMenu(x){
       if(x.classList.contains('change')){
          document.getElementById('burger-menu').style.width = '100%';
       }
       else{
          document.getElementById('burger-menu').style.width = '0px';
       }
    }

</script>

https://jsfiddle.net/esa1vn0j/1/

Answer 2

Following your approach (where you set the width), I'd create a single function toggleSideMenu where:

• Check if element's width is already 100%.
• If not, set it to 100%.
• Otherwise, set it to 0px.

Example:

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

<script>
  function toggleSideMenu(x) {
    const el = document.getElementById('burger-menu')
    el.style.width = el.style.width === '100%' ? '0px' : '100%'
  }
</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>  

But really, I'd just use a class called .opened to do the toggle If I was you.

Answer 3

Instead of change the width of "#burger-menu" element when click on burger icon, you can toggle class (example open class) then set the width of "#burger-menu" in css.

#burger-menu{
  width: 0%;
}
#burger-menu.open{
  width: 100%;
}

Click function:

  document.getElementById('burger-menu').classList.toggle("open");

Demo: https://jsfiddle.net/viet_solution/n8hxqavg