I have a simple menu, everytime i click an element the others fadeOut and the clicked one goes up if it's not the first element, and after that i activate the href of the link.
To activate the link i need to make sure that the element is in the top of the page, after the addClass slideUpSm the clicked item gets new position top but i think the position top needs to be refreshed because the addClass slideUpSm gets the css top 0
setTimeout(function() {$('.main-nav li').addClass('slideUpSm')}, 1200);
After that, i can activate the window location, i have tried the hasClass methode and also tried to check if the new position top equals zero, here is my attempt https://jsfiddle.net/n37kgv4r/
setTimeout(function() {window.location = href}, 100);
If you just want to hide the other links and navigate to only the clicked node, we dont need to use the css top. We can achieve this with simple jquery code.
$(document).ready(function(){
$('.main-nav li a').click(function(e){
$(this).parent().addClass('show');
$('.main-nav li').not('.show').slideUp(1200);
var obj = $(this);
setTimeout(function(){
//remove the alert
alert("Navigating to "+ obj.attr('href'));
window.location.href=obj.attr('href');},2000)
return false;
});
});a {
text-decoration: none;
color: black;
}
.main-nav {
position: relative;
}
.main-nav li {
position: sticky;
display: flex;
font-size: 60px;
line-height: 43px;
letter-spacing: -3px;
margin-bottom: 11px;
transition: all 2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul class="main-nav">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>