How to make ul button text fade in and out when button is clicked?

Question

Quick question, how can I make my Ul buttons slowly appear (when menu button is clicked) using Javascript. Here is what I have so far:

Basically, when the menu expand nav function is called I want the li tags to slowly appear/disappear. How can I go about this? This is only a snippet of my script because it is quite a lot.

Thanks!

 setup(); function setup() { document.getElementById("extend-nav-container").style.display = "none"; } function expandNav() { if (document.getElementsByTagName("body")[0].style.overflow === "hidden") { document.getElementById("extend-nav").style.height = "0px"; document.getElementsByTagName("body")[0].style.overflow = ""; document.getElementById("extend-nav-container").style.display = "none"; } else { document.getElementById("extend-nav").style.height = "100vh"; document.getElementsByTagName("body")[0].style.overflow = "hidden"; document.getElementById("extend-nav-container").style.display = ""; document.getElementById('fadeout').style.opacity = '0'; } } function myFunction(x) { document.getElementById("extend-nav").style.height = "0px"; document.getElementsByTagName("body")[0].style.overflow = ""; document.getElementById("extend-nav-container").style.display = "none"; } var x = window.matchMedia("(max-width: 768px)") myFunction(x); x.addListener(myFunction); 

 .new-nav { background: black; display: flex; transition: 0.5s; justify-content: center; } .new-nav .container { width: 98%; height: 98%; transition: 0.5s; } #extend-nav ul { list-style-type: none; height: 100%; transition: 1s; } #extend-nav li { margin-bottom: 10px; } #extend-nav a { text-decoration: none; color: white; font-weight: lighter; transition: 0.5s; } 

 <div class="new-nav" id="extend-nav"> <div class="container" id="extend-nav-container"> <ul id="second-nav-ul"> <li><a href="#">Home</a></li> <li><a href="#">Ban</a></li> <li><a href="#">Warn</a></li> <li><a href="#">Gift</a></li> <li><a href="#">Records</a></li> <li><a href="#">Moderator</a></li> <li><a href="#">News</a></li> <li><a href="#">Edit</a></li> <li><a href="#">Account</i></a></li> <li><a href="#">Sign Out</a></li> </ul> </div> </div> 

Answer 1

You can use javascript to toggle a class when user click on your hamburger or somewhere on the menu.

Display: none cannot be applied with transition effect, so you need to use visibility attribute instead.

 function myFunction() { var element = document.getElementById("second-nav-ul"); element.classList.toggle("collapse"); } 

 .nav { list-style-type: none; margin: 0; padding: 10px; display: flex; align-items: center; justify-content: space-between; background-color: #000; height: 50px; } ul li a { color: #FFF; } .collapse { height: 0px; padding: 0px; visibility: hidden; transition:all 0.1s linear; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="new-nav" id="extend-nav"> <button onclick="myFunction()">Toggle Me</button> <div class="container" id="extend-nav-container"> <ul id="second-nav-ul" class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Ban</a></li> <li><a href="#">Warn</a></li> <li><a href="#">Gift</a></li> <li><a href="#">Records</a></li> <li><a href="#">Moderator</a></li> <li><a href="#">News</a></li> <li><a href="#">Edit</a></li> <li><a href="#">Account</a></li> <li><a href="#">Sign Out</a></li> </ul> </div> </div> 

Answer 2

try with this

#extend-nav{
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s; }