HI,
I have been trying to create a toggle menu with javascript but there seems to be some problem and the hamburger menu is not working as required. Please let me know if someone can spot out the error.
<!DOCTYPE html>
<html>
<head>
<meta name="" content="">
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="nav-main">
<div class="btn-toggle" onclick="toggleNav()"></div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Features</a></li>
</ul>
</nav>
<aside class="nav-sidebar">
<ul>
<li><span>Projects</span></li>
<li><a href="#">Home sweet Home</a></li>
<li><a href="#">About Us is all you need</a></li>
<li><a href="#">Contact us now</a></li>
<li><a href="#">Features</a></li>
</ul>
</aside>
</body>
<script type="text/javascript" src="main.js"></script>
</html>
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/*code */
body {
background-color: #E8E8E8;
}
.nav-main {
position: fixed;
top: 0;
width: 100%;
height: 60px;
background-color: #FFF;
display: flex;
flex-wrap: wrap;
z-index: 1000;
transition: all 0.3s ease-in-out;
}
.btn-toggle{
width: 60px;
height: 100%;
background-color: #F98F39;
background-size: 60%;
background-position: center;
background-image: url(ham.png);
background-repeat: no-repeat;
cursor: pointer;
}
.btn-toggle:hover{
opacity: 0.6;
}
.nav-main ul{
display: flex;
flex-wrap: wrap;
padding-left: 10px;
}
.nav-main ul li{
list-style: none;
line-height: 60px;
}
.nav-main ul li a {
height: 100%;
display: block;
padding: 0 20px;
text-transform: uppercase;
text-decoration: none;
color: #111;
font-size: 16px;
}
.nav-sidebar {
position: fixed;
width: 50px;
background-color: #696969;
padding: 0 5px;
left: 0;
height: calc(100vh - 60px);
bottom:0;
z-index: 1000;
}
.nav-sidebar ul{
padding-top: 15px;
visibility: hidden;
}
.nav-sidebar ul li{
line-height: 60px;
list-style: none;
}
.nav-sidebar ul li a, .nav-sidebar ul li span{
display: block;
color: white;
text-transform: uppercase;
padding:0 10px;
text-decoration: none;
font-size: 16px;
white-space: nowrap;
height: 60px;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.nav-sidebar ul li a:hover {
background-color: #222;
}
let toggleNavStatus = false;
let toggleNav = function() {
let getSidebar = document.querySelector(".nav-sidebar");
let getSidebarUl = document.querySelector(".nav-sidebar ul");
let getSidebarSpan = document.querySelector(".nav-sidebar span");
let getSidebarLinks = document.querySelectorAll(".nav-sidebar a");
if (toggleNavStatus === false) {
getSidebarUl.style.visibility = "visible";
getSidebarSpan.style.width = "500px";
getSidebarLinks.style.opacity = "0.5";
let arrayLength = getSidebarLinks.length;
for (let i = 0; i < arrayLength; i++) {
getSidebarLinks[i].style.opacity = "1";
}
toggleNavStatus = true;
}
else if (toggleNavStatus === true) {
getSidebarUl.style.visibility = "hidden";
getSidebarSpan.style.width = "50px";
getSidebarLinks.style.opacity = "0";
let arrayLength = getSidebarLinks.length;
for (let i = 0; i < arrayLength; i++) {
getSidebarLinks[i].style.opacity = "0";
}
toggleNavStatus = false;
}
}