How to add transition effect to the navigation bar list elements after click on the hamburger icon-CodePudding

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

CodePudding user response：

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;
}

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>

CodePudding user response：

You can add transition to width, and toggle it between 0 and expected width.
You can add transition to left, and toggle it between 0 and negative width.
You can add transition to transform: translateX, and toggle it between 0 and -100%.

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>