Link to home
Start Free TrialLog in
Avatar of Revolution9
Revolution9

asked on

Need more interactivity in nav menu

I have a menu that I need more interactivity coded in.  Specifically, when you are on a page, I want that corresponding menu word (i.e. news) to be in white, and underlined.  How do I code it?  I'm attaching the style sheet and a sample page.

Thanks!
style.css
bio.html
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

You need to use either javascript or server-side scripting code like PHP to determine what page the user is on or which menu item was last clicked and apply a different CSS class to the appropriate menu item.  

Here's an idea or two to get you started:

http://www.richnetapps.com/automatically_highlight_current_page_in/
http://www.paulund.co.uk/use-jquery-to-highlight-active-menu-item
Avatar of Revolution9
Revolution9

ASKER

I was afraid you'd say that.
Create a class for your nav for current page.

header nav ul li.currentpage a {
      color:red;
    text-decoration:underline
}

Then in your li add the class currentpage

 <li class="currentpage"><a href="index.html">home</a></li>

http://jsbin.com/umitig/1/

Play around with the actual color you want and also a hover feature too
ASKER CERTIFIED SOLUTION
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial