Ty H Ty H - 2 months ago 14
HTML Question

Opening and closing sidenav menu and issues with navbar

I have run in to a couple issues here. I am trying to have a locked top bar, which does work. However even though I have placed some items like the orange animated button, it appears on the bar before the text links. Secondly. I am hopeful it's possible to use the animated button as a means to also close the pop out menu from the right side of the page. Sorry if this is something really simple I'm missing here. I am still learning this stuff.



function myFunction(x) {
x.classList.toggle("change");
}

function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}

body {
font-family: "Lato", sans-serif;
}

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}


.navbar {
overflow: hidden;
background-color: #577CC1;
position: fixed;
top: 0;
width: 100%;
}

.navbar a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-size: 17px;
}

body {
margin:0;
background-color: #ec7c23;
font-color: ;
font-size: 10pt;
font-family: arial;
height: 1000;

}

p, td, th {
font-size: 10pt;
font-family: arial;
}

form {
margin: 0px;
padding: 0px;
}

.main {
padding: 10px;
margin-top: 30px;
}



/*animated button*/
.container {
display: inline-block;
cursor: pointer;
}

.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #ec7c23;
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 animated button*/

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;
</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>

<div class="navbar">
<font size=20 color=white>&nbsp;
<b>Website</b>
</font>


<a href="#link">Link</a>
<a href="#Link2">Another Link</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>

&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-size:30px;cursor:pointer" onclick="openNav()" >
<div class="container" onclick="myFunction(this)" >
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</span>
</div>




Answer Source

Hope this helps:

<div class="navbar" style="z-index: 1000">
   <font size=20 color=white>&nbsp;
        <b>Website</b></font>

   <span style="font-size:30px;cursor:pointer;float:right;">
        <div class="container" onclick="myFunction(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
    </span>
    <a href="#link">Link</a>
    <a href="#Link2">Another Link</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a> &nbsp;&nbsp;&nbsp;&nbsp;
</div>

<script>
    function myFunction(x) {
        x.classList.toggle("change");
        var mySidenavWidth = document.getElementById("mySidenav").style.width;

        if (mySidenavWidth === "250px")
             closeNav();
        else
             openNav();               
    }
    function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
    }

    function closeNav() {
        document.getElementById("mySidenav").style.width = "0px";
    }
</script>