How to properly Hide and Show navigation menu with html, css, and javascript

Question

I am trying to make it so that when the menu icon on the top right of the screen is clicked, the navigate menu will toggle between showing and hiding.

Here is an image for context.

When the button on the top right is clicked, it does not toggle between showing and hiding at all.

Here is the code so far.

var menuBtn = document.getElementById("menuBtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")

menuBtn.onclick = function(){
    if(sideNav.style.right == "-250px"){
        sideNav.style.right = "0";
    }
    else{
        sideNav.style.right = "-250px";
    }
}

#sideNav{
    width: 250px; /*change font size of text in nav bar*/
    height: 100vh;
    position: fixed;
    right: 0;
    top:0;
    background: #009688;
    z-index: 2;
}
nav ul li{
    list-style: none;   
    margin: 45px 15px;
}
nav ul li a{
    text-decoration: none;
    color: #fff;
}
#menuBtn{
    width: 50px;
    height: 50px;
    background: #009688;
    text-align: center;
    position: fixed;
    right: 30px;
    top: 20px;
    border-radius: 3px;
    z-index: 3;
    cursor: pointer;
}
#menuBtn img{
    width: 20px;
    margin-top: 15px;
}

<div id="sideNav">
    <nav>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">COVID-19</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">REVIEWS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>      
</div>
<div id="menuBtn">
    <img src="images/menu.PNG" id="menu">
</div>

you have call the wrong id for sideNav, it should sidNav

Minal Chauhan
– Minal Chauhan

2020-11-05 07:25:11 +00:00
Commented Nov 5, 2020 at 7:25 — Minal Chauhan
– Minal Chauhan, Commented Nov 5, 2020 at 7:25

topdev87 · Accepted Answer · 2020-11-05 07:24:31Z

2

You have typo in the 2nd line of javascript file. ...document.getElementById("sideNav ") should be var sideNav = document.getElementById("sidNav")

var menuBtn = document.getElementById("menuBtn")
    var sideNav = document.getElementById("sidNav")
    var menu = document.getElementById("menu")
    
    menuBtn.onclick = function(){
        if(sideNav.style.right == "-250px"){
            sideNav.style.right = "0";
        }
        else{
            sideNav.style.right = "-250px";
        }
    }

#sidNav{
    width: 250px; /*change font size of text in nav bar*/
    height: 100vh;
    position: fixed;
    right: 0;
    top:0;
    background: #009688;
    z-index: 2;
}
nav ul li{
    list-style: none;   
    margin: 45px 15px;
}
nav ul li a{
    text-decoration: none;
    color: #fff;
}
#menuBtn{
    width: 50px;
    height: 50px;
    background: #009688;
    text-align: center;
    position: fixed;
    right: 30px;
    top: 20px;
    border-radius: 3px;
    z-index: 3;
    cursor: pointer;
}
#menuBtn img{
    width: 20px;
    margin-top: 15px;
}

<div id="sidNav">
        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">COVID-19</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">REVIEWS</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>      
    </div>
    <div id="menuBtn">
        <img src="images/menu.PNG" id="menu">
    </div>

answered Nov 5, 2020 at 7:24

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

minTwin Over a year ago

I've tried implementing the suggestions but I am not getting the same result.

topdev87 Over a year ago

remove the space here var sideNav = document.getElementById("sideNav ")

Collectives™ on Stack Overflow

How to properly Hide and Show navigation menu with html, css, and javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related