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=".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>

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./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>

• javascript
• html
• css

Share Improve this question Follow edited Apr 2, 2019 at 18:11 Jack 9,38822 gold badges3434 silver badges4545 bronze badges asked Apr 2, 2019 at 17:43 Alex AntonyAlex Antony 9111 gold badge33 silver badges88 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

Inspired by this post: https://stackoverflow./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./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>