Highlight Current Menu Button
Works in all browsers and IE8+
Please view the source of this page for HTML markup, CSS and JS.
How it Works
The script works by comparing the page's filename from the URL, to any href values in the menu, and if they match, it adds a class to the anchor's parent <li>.
Additionally, it adds the page name as a class to the <body> tag.
So, using the example above, if you were viewing the "about-us.htm" page in a web browser, the menu <li> for "About Us" gets a ".current" class, and the <body> element get a ".about-us" class;
<li><a href="abount-us.htm" class="current">About</a></li>
- The CSS selector to the a elements in the menu
- The file name of the home page
- The class you want to give current / active menu items
Pop it above the closing </body> tag.
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.