Active Menu Highlight CSS
add simply way
<div id='cssmenu'>
<ul>
<li class=''><a href='1.html'><span>1</span></a></li>
<li class=''><a href='2.html'><span>2</span></a></li>
<li class='' style="float:right;"><a href='3.html'><span>3</span></a></li>
</ul>
</div>
$("document").ready(function(){
$(function() {
$('.cssmenu a[href="' + location.pathname.split("/")[location.pathname.split("/").length-1] + '"]').parent().addClass('active');
});
});
Add a class to the body of each page:
<body class="home">
Or if you're on the contact page:
<body class="contact">
Then take this into consideration when you're creating your styles:
#sub-header ul li:hover,
body.home li.home,
body.contact li.contact { background-color: #000;}
#sub-header ul li:hover a,
body.home li.home a,
body.contact li.contact a { color: #fff; }
Lastly, apply class names to your list items:
<ul>
<li class="home"><a href="index.php">Home</a></li>
<li class="contact"><a href="contact.php">Contact Us</a></li>
<li class="about"><a href="about.php">About Us</a></li>
</ul>
This point, whenever you're on the body.home
page, your li.home a
link will have default styling indicating it is the current page.
Answer: You need CSS for “current” link here is tut.
Description of jQuery menu nav
Sample : One of meny solution
Its working for me