Active Menu Highlight CSS
css, html, javascript, jquery
Solution
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.
Problem
I want to highlight the current menu you have click. I'm using CSS, but it is now working. here is my css code: ``` #sub-header ul li:hover{ background-color: #000;} #sub-header ul li:hover a{ color: #fff; } #sub-header ul li.active{ background-color: #000; } #sub-header ul li.active a{ color: #fff; } ``` here is my html: ``` <div id="sub-header"> <ul> <li> <a href="index.php">Home</a> </li> <li> <a href="contact.php">Contact Us</a> </li> <li> <a href="about.php">About Us</a> </li> </ul> </div> ``` This is what I like when I hover and if the menu is active Hover is okay, The problem is when I after click the menu the black ground is not display @Jonathan, I have already solve it and it is more simply than what you have gave. this is my answer: ``` $(function(){ // this will get the full URL at the address bar var url = window.location.href; // passes on every "a" tag $("#sub-header a").each(function() { // checks if its the same on the address bar if(url == (this.href)) { $(this).closest("li").addClass("active"); } }); }); ``` then on my css file: ``` .active { background-color: #000; } /* to override the existing css for "a" tag */ #sub-header .active a{ color: #fff; } ```