How to make the transition smooth for the hamburger menu in responsive navbar when toggled?

Question

I'm making a responsive navbar with a hamburger menu that toggles the navbar when clicked on the Hamburger Icon. I'm trying to make the dropdown of the Nav menu smooth using transition property in CSS. But there is no change in the transition while toggling.

I have tried adding height property to the navbar but still, there is no transition.

 var toggleButton = document.querySelector('.toggle-btn'); var navLinks = document.querySelector('.nav-main'); toggleButton.addEventListener('click', function() { navLinks.classList.toggle('hidden'); }); 

 .navbar { background: #000; font-size: 26px; font-family: 'Play', sans-serif; padding-top: 35px; padding-bottom: 20px; } .nav-main { display: none; } .nav-main li { list-style: none; text-align: center; margin: 10px auto; } .nav-links { text-decoration: none; color: #F5F5F5; } .nav-links:hover { color: #E6E6E6; } .toggle-btn { position: absolute; top: 15px; right: 35px; cursor: pointer; color: #F5F5F5; } .toggle-btn:hover { color: #E6E6E6; } .hidden { display: block; } 

 <link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/> <nav class="navbar"> <span class="toggle-btn"><i class="fas fa-bars"></i></span> <ul class="nav-main"> <li><a href="#" class="nav-links">Home</a></li> <li><a href="#" class="nav-links">Portfolio</a></li> <li><a href="#" class="nav-links">About</a></li> <li><a href="#" class="nav-links">Blog</a></li> <li><a href="#" class="nav-links">Contact</a></li> </ul> </nav> 

Answer 1

To animate height by transition you should change max-height property. You can take a look at this example here: https://codepen.io/felipefialho/pen/ICkwe

For your case:

1) set max-height: 0 for .nav-main

2) set max-height: ${your max height value here} for .nav-main--open

3) change this row navLinks.classList.toggle('nav-main--open');

Probably it will be useful for you.

Answer 2

Inspired by this post: https://stackoverflow.com/a/25544161/2777988

I used a label and a hidden checkbox to implement a smooth linear transition. This doesn't even require any Javascript.

 #block { background: #000; height: 0; overflow: hidden; transition: height 300ms linear; font-size: 26px; font-family: 'Play', sans-serif; } label { cursor: pointer; } #showblock { display: none; } #showblock:checked+#block { height: 240px; } .navbar { background: #000; font-size: 26px; padding-top: 35px; padding-bottom: 10px; font-family: 'Play', sans-serif; } .nav-main { display: block; } .nav-main li { list-style: none; text-align: center; margin: 10px auto; } .nav-links { text-decoration: none; color: #F5F5F5; } .nav-links:hover { color: #E6E6E6; } .toggle-btn { position: absolute; top: 15px; right: 35px; cursor: pointer; color: #F5F5F5; } .toggle-btn:hover { color: #E6E6E6; } .hidden { display: block; } 

 <link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet" /> <nav class="navbar"> <span class="toggle-btn"><label for="showblock" class="fas fa-bars"></label></span> </nav> <input type="checkbox" id="showblock" /> <div id="block"> <ul class="nav-main"> <li><a href="#" class="nav-links">Home</a></li> <li><a href="#" class="nav-links">Portfolio</a></li> <li><a href="#" class="nav-links">About</a></li> <li><a href="#" class="nav-links">Blog</a></li> <li><a href="#" class="nav-links">Contact</a></li> </ul> </div>