chawin chawin -4 years ago 102
CSS Question

side nav unable to retreat

I have the following side navigation that is unable to retreat back when I click the button, although it can appear. The same button is used to open and close the side navigation.

I found similar threads in this forum and I am using the same code provided by some of the people, however, it doesn't seem to work in my situation.

I am also trying to change the shape of the button from ☰ to X in the same function that is extending/retreating the side Nav.

The button is able to change the shape everytime though.

Thanks for helping!

HTML:

<div class = "icon" onclick = "Change(this)"> <!-- start of menu icon -->
<div class = "bar1"></div>
<div class = "bar2"></div>
<div class = "bar3"></div>
</div> <!-- end of menu icon -->


<div id = "mysideNav" class = "sideNav"> <!-- start of side navigation -->
<a href = "#"> About the bank </a>
<a href = "#"> Mission </a>
<a href = "#"> Vision </a>
<a href = "#"> Why us? </a>
<a href = "#"> Contacts </a>
</div>


CSS:

.icon /* start of menu icon*/
{
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3
{
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1
{
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2
{
opacity: 0;
}
.change .bar3
{
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
} /* end of menu icon */
.sideNav /* start of sideNav */
{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: auto;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sideNav a
{
padding: 15px 32px 15px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sideNav a:hover, .offcanvas a:focus
{
color: #f1f1f1;
} /* end of sideNav */


Javascript:

function Change(x) // script for menu icon
{
var mynav = document.getElementById("mysideNav");
x.classList.toggle("change");
if (mynav.style.width = "0px")
{
mynav.style.width = "250px";
}
else
{
mynav.style.width = "0px";
}
} //end of script for menu icon

Answer Source

You were almost there!

When you were checking for the current mynav width, you were incorrectly checking the width... instead, you were declaring inside the if statement. I believe you just typo-ed there, but for comparisons, use == or ===. You can read more about the differences here.

I made an adjustment to your javascript as shown below:

function Change(x)                         // script for menu icon 
{
    var mynav = document.getElementById("mysideNav");
    x.classList.toggle("change");
    if (mynav.offsetWidth === 0) 
    {
       mynav.style.width = "250px";
       console.log("open");
    }
   else
   {
       mynav.style.width = "0px";
       console.log("close");
   } 
} 

I used offsetWidth to check the width, which is from the element and not style. Read more here.

Notice I also added console.login each condition block. This helped me narrow down the comparison issue rather quickly.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download