3

I want to add a transition (transition : all .5s ease-out) when I click on a hamburger menu. What it is doing is when you click it one class is added, So <ul class = "nav"> will be changed into <ul class = "nav change"> using JS

var mybutton = document.getElementById("myBtn");

function onClickMenu() {
  document.getElementById("nav").classList.toggle("change");
}
.navigation {
  display: flex;
  background-color: rgb(46, 46, 46);
}

.nav {
  padding: 0;
  margin: 0 20px;
  display: none;
}

.change {
  background-color: #2e2e2e;
  margin: 0;
  position: absolute;
  font-size: .8rem;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: all .5s ease-out;
}
<div class="navigation">
  <div id="menu" onclick="onClickMenu()">
    <div id="bar1" class="bar"></div>
    <div id="bar2" class="bar"></div>
    <div id="bar3" class="bar"></div>
  </div>
  <ul class="nav" id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">More</a></li>
  </ul>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Nirmal
  • 53
  • 5
  • 3
    Your problem is that transition will have no effect over display none > flex. You probably will need to modify height, opacity or visibility to get the effect you want. Also, try to add a [mcve] that really show your issue – Calvin Nunes Nov 09 '21 at 17:24
  • 1
    Transitions only apply to properties that have a numerical value or can be translated to a numerical value. `display` does not. – Scott Marcus Nov 09 '21 at 17:43

0 Answers0