I've been working on creating a side navigation menu using HTML, CSS, and Javascript. I successfully implemented the function to toggle open and close the navigation, but upon adding a background image, I noticed that the links still appear even when the navigation is closed. I tried using display: none; for both the li items and the links, but it resulted in all links disappearing, except for the Home link. Here's my code:
<nav>
<p class="brand">DreamJob</p>
<div class="burger">
<div class="line"></div>
</div>
<ul class="ul-one">
<li class="li-one"><a href="#" class="links-one">Home</a></li>
<li class="li-one"><a href="#" class="links-one">About</a></li>
<li class="li-one"><a href="#" class="links-one">Contact</a></li>
<li class="li-one"><a href="#" class="links-one">Feedback</a></li>
<li class="li-one"><a href="#" class="links-one">Sign up</a></li>
<li class="li-one"><a href="#" class="links-one">Sign in</a></li>
</ul>
</nav>
nav .ul-one {
position: absolute;
right: 0;
top: 90px;
background-color: #111;
width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
transition: 0.5s ease-in-out;
}
nav .ul-one .li-one {
margin: 10px 0px 10px 0px;
z-index: 200;
}
nav .ul-one .li-one .links-one {
color: #fff;
font-size: 16px;
font-family: karma;
text-decoration: none;
display: none;
}
function nav () {
let burger = document.querySelector(".burger");
let ul = document.querySelector("ul-one");
let links = document.querySelector(".links-one");
let openNav = false;
burger.addEventListener("click", () => {
if (!openNav) {
document.querySelector(".ul-one").style.width = "40%";
document.querySelector(".links-one").style.display ="block";
openNav = true;
}else {
document.querySelector(".ul-one").style.width = "0";
document.querySelector(".links-one").style.display ="none";
openNav = false;
}
});
}
nav();