Highlight The Current Page In The Menu Bar

How can I change the menu color when the page is selected? Example: home faq contact_us I want to show which page is selected in the menu bar. I'm using CSS but not sure how to

Solution 1:

Well, if you're writing the menu to each page (as seems to be the case from your comments) there's nothing stopping you from changing the background colour for the specific <li> related to that page.

Example below showing white background for current page (Home) or default colour for non-active pages.

<listyle="background-color:rgb(255,255,255);">Home</li><li>FAQ</li><li>Contact Us</li>

Alternatively you could use some script and create tabs like I have done in this fiddle: http://jsfiddle.net/gstubbenhagen/zAbmA/

I would only recommend the tabs if you don't have too much content on each page as you don't want to make 1 very large page which takes forever to load on slower connections.

NOTE: If using the tabs option the example provided uses a JQuery plugin, make sure you add the same tools if you are not going to re-code.