I have developed a navigation bar with a menu that includes options like home, about-us, and more. When I click on the navbar, the nav-menu slides down to display a list of navlinks. However, when I select a navlink, such as about-us, the nav menu slides back up without opening the about-us page.
Here is the HTML code:
<div class="navbar">menu<span><img src="images/menu-arrow.png"></span></div>
<div class="nav-menu">
<ul>
<li><a href="index.html" id="home" class="nav-link"><h1>Home</h1></a></li>
<li><a href="about-us.html" id="home" class="nav-link"><h1>About us</h1></a></li>
<li><a href="services.html" id="services" class="nav-link"><h1>Services</h1></a></li>
</ul>
</div>
And here is the Jquery code:
$(function(){
$(".nav-menu li a").click(function(e){
e.preventDefault(); //Prevents default anchor tag behavior
$('.navbar span img').removeClass('flipped').css({"transition":".5s"});
$('.nav-menu').animate({'height':'toggle'});
var url = this.href;
$(".main-container").load(url);
});
});
My goal is to make the nav-menu slide up when clicking on navlinks, fade out the current page, and simultaneously show the targeted page.