If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
The following article will show you how can you highlight a page’s link on a navigation menu using CSS code, and no scripting. When you have a navigation menu, let’s say standard : Home, About, Contact, Products links and the viewer is looking at the Contact page, the link shall be highlight so they are viewing that page.
To do this, you are able by adding a class to the link that direct you to that page. The class must be moved to the relevant link on each page. The method that we have presented now, is very known and more than that, works just fine, though the following tutorial will show you to make it automate the process and make the menu part of an include.
HTML:
Home page
CSS code:
CSS code:
On each HTML pages be sure to see that the correct class are in the body tag so they will work fine.
Doing that ok, the correct page will automatically be highlighted when the user lands there.