Different CSS transition after toggleClass
Cheers everyone
I made this pen lately https://codepen.io/alexyap/full/MmYvLw/ and I am on my nav menu. It works great when it transitions, but it just looks terrible when it disappears. I just can't figure this part out.
<div id="nav-container" class="hidden">
<ul>
<li id="nav1" class="hidden"><a href="#">About</a></li>
<li id="nav2" class="hidden"><a href="#">Work</a></li>
<li id="nav3" class="hidden"><a href="#">Contact</a></li>
</ul>
</div>
JS:
$("#nav-container").delay(200).queue(function(n){
$(this).toggleClass("hidden")
n()
})
$("#nav1").delay(400).queue(function(n){
$(this).toggleClass("hidden")
n()
})
$("#nav2").delay(600).queue(function(n){
$(this).toggleClass("hidden")
n()
})
$("#nav3").delay(800).queue(function(n){
$(this).toggleClass("hidden")
n()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
It works fine if I take the class hidden from # nav-container, but it blocks my CTA button on the landing page when I do this. What I am trying to do is click the menu button which turns into "X", my links in the nav menu should go one by one just like when it navigates to it without me to add the class hidden back to # nav -container again. Sorry if I don't make any sense. English is not my first language, but just try to look at my pen and you will see what I mean.
source to share
One way to do this is to translate the transitions to CSS and just switch the class to the container. We will use the property transition-delay
to handle the desired temporary effect. Below is an example.
Here's a fork of your Pen to show it in full.
Relevant HTML:
<div id="menu-overlay"></div>
<div id="menu-button-container">
<div id="menu-button">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="nav-container">
<ul>
<li id="nav1"><a href="#">About</a></li>
<li id="nav2"><a href="#">Work</a></li>
<li id="nav3"><a href="#">Contact</a></li>
</ul>
</div>
Relevant CSS:
#menu-overlay {
position: absolute;
height: 0;
width: 100%;
background: rgba(52, 73, 94,1.0);
left: 0;
top: 0;
transition: .5s ease-in 1200ms;
z-index: 2000;
}
.showing #menu-overlay {
transition: .5s ease-in 0s;
}
.reveal {
height: 100vh !important;
}
#nav-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -10;
transition-property: z-index;
transition-delay: 1200ms;
}
.showing #nav-container {
z-index: 2000;
transition-delay: 0s;
}
#nav-container ul li {
list-style: none;
margin-left: 0;
opacity: 0;
visibility: hidden;
margin-left: -60%;
}
.showing #nav-container ul li {
opacity: 1;
visibility: visible;
margin-left: 0;
}
#nav1 {
transition: 0.6s ease-in 200ms;
}
#nav2 {
transition: 0.6s ease-in 400ms;
}
#nav3 {
transition: 0.6s ease-in 600ms;
}
Relevant JS:
$('#menu-button').click(function(){
$('body').toggleClass('showing');
});
source to share