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>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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments