I'm asking a very specific question that I think is really easy to fix, but I just don't know what the problem with it is. Basically, I'm making a responsive navigation bar, It just has 3 UL list elements, nothing else, I also have a hamburger icon for mobile sizes, it works perfectly, when I click it, the list elements appear, but there's one thing I wish was different. When I click on the icon, I want my list elements to appear with a smooth transition, they just pop up directly. I have tried adding the transition method to the css but I have no idea why it doesn't work. Here's the pictures and the css code below : Before Click After Click
const menuBtn = document.querySelector(".menu-btn");
const navUL = document.querySelector(".nav-ul");
let menuOpen = false;
menuBtn.addEventListener("click", () => {
if(!menuOpen){
menuBtn.classList.add("open");
navUL.classList.add("show")
menuOpen = true;
}else {
menuBtn.classList.remove("open");
navUL.classList.remove("show")
menuOpen = false;
}
})nav ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
}
.nav-ul.show {
display: flex;
padding-left: 1em;
padding-top: 1em;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: 1rem;
padding: 0.5em;
color: #6F69AC;
}<nav>
<div class="menu-btn">
<div class="menu-btn_burger">
[BURGER ICON]
</div>
</div>
<ul class="nav-ul">
<li><a href="">About</a></li>
<li><a href="">Art</a></li>
<li><a href="">Projects</a></li>
</ul>
</nav>Any help would be appreciated <3
I hope it could help you.
css
nav ul {
display: flex;
padding: 0 1em;
margin: 0;
list-style: none;
}
.nav-ul {
max-width: 0;
overflow: hidden;
transition: all .3s ease;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: 1rem;
padding: 0.5em;
color: #6F69AC;
}
JS
const menuBtn = document.querySelector(".menu-btn");
const navUL = document.querySelector(".nav-ul");
let menuOpen = false;
menuBtn.addEventListener("click", () => {
if (!menuOpen) {
menuBtn.classList.add("open");
navUL.style.maxWidth = navUL.scrollWidth + 'px';
menuOpen = true;
} else {
menuBtn.classList.remove("open");
navUL.style.maxWidth = null;
menuOpen = false;
}
})
HTML
<nav>
<div class="menu-btn">
<div class="menu-btn_burger">
</div>
</div>
<div class="nav-ul">
<ul>
<li><a href="">About</a></li>
<li><a href="">Art</a></li>
<li><a href="">Projects</a></li>
</ul>
</div>
</nav>
You can remove other display and visibility properties to manipulate it being hidden
const menuBtn = document.querySelector(".menu-btn");
const navUL = document.querySelector(".nav-ul");
let menuOpen = false;
menuBtn.addEventListener("click", () => {
if(!menuOpen){
menuBtn.classList.add("open");
navUL.classList.add("show")
menuOpen = true;
}else {
menuBtn.classList.remove("open");
navUL.classList.remove("show")
menuOpen = false;
}
})nav ul {
transform: translateX(-100%);
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
transition: transform 0.5s;
position: absolute;
}
.nav-ul.show {
transform: translateX(0);
padding-left: 1em;
padding-top: 1em;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: 1rem;
padding: 0.5em;
color: #6F69AC;
}<nav>
<div class="menu-btn">
<div class="menu-btn_burger">
[BURGER ICON]
</div>
</div>
<ul class="nav-ul">
<li><a href="">About</a></li>
<li><a href="">Art</a></li>
<li><a href="">Projects</a></li>
</ul>
</nav>