CODEWITHSUNDEEP
javascript
Steven Hale
Steven Hale

Reputation: 226

Open/Close side Nav with Java script

I have a side navbar that opens when clicking on the hamburger button ☰

My issue is that it does not close! I am using JavaScript in VS Code.

I have added my code below for a more complete view.

function openNav() {
  if (document.getElementById("mySidebar").style.width = "0") {
      document.getElementById("mySidebar").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
  }    
  else if (document.getElementById("mySidebar").style.width !== "0") {
      document.getElementById("mySidebar").style.width = "0px";
      document.getElementById("main").style.marginLeft = "0px";
  }
}
.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .sidebar a:hover {
    color: #f1f1f1;
  }
  
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  .openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
  }
  
  .openbtn:hover {
    background-color: #444;
  }
  
  #main {
    transition: margin-left .5s;
    padding: 16px;
  }
  
  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}
  }

  .aligncenter {
    text-align: center;
    position:relative;
  }
  
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css">
</head>

<script src="JS/Scripts.js"></script>
<body>
  <div id="mySidebar" class="sidebar">
    <a href="#" class="aligncenter">About</a>
    <a href="#" class="aligncenter">Services</a>
    <a href="#" class="aligncenter">Clients</a>
    <a href="#" class="aligncenter">Contact</a>
  </div>
  
  <div id="main">
    <button class="openbtn" onclick="openNav()">☰</button>  
    <h2>Collapsed Sidebar</h2>
    <p></p>
  </div>
</body>

</html>

Upvotes: 1

Views: 893

Answers (1)

fortunee
fortunee

Reputation: 4332

Your if condition should use the double/triple equals (== or ===) as opposed to an assignment operator (=) which is a single equal sign

Refactor your if statement condition to look like this

if (document.getElementById("mySidebar").style.width === "0") {...}

See a working example below

function openNav() {
    const sideBarWidth = document.getElementById("mySidebar").style.width;
    
    if (!sideBarWidth || sideBarWidth == "0px") {
        document.getElementById("mySidebar").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
    } else if (sideBarWidth !== "0px") {
        document.getElementById("mySidebar").style.width = "0px";
        document.getElementById("main").style.marginLeft = "0px";
    }
}
.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .sidebar a:hover {
    color: #f1f1f1;
  }
  
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  .openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
  }
  
  .openbtn:hover {
    background-color: #444;
  }
  
  #main {
    transition: margin-left .5s;
    padding: 16px;
  }
  
  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}
  }

  .aligncenter {
    text-align: center;
    position:relative;
  }
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css">
</head>

<script src="JS/Scripts.js"></script>
<div id="mySidebar" class="sidebar">
    <a href="#" class="aligncenter">About</a>
    <a href="#" class="aligncenter">Services</a>
    <a href="#" class="aligncenter">Clients</a>
    <a href="#" class="aligncenter">Contact</a>
  </div>
  
  <div id="main">
    <button class="openbtn" onclick="openNav()">☰</button>  
    <h2>Collapsed Sidebar</h2>
    <p></p>
  </div>
</body>

</html>

Upvotes: 1

Related Questions