• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 556
  • Last Modified:

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
0
Revolution9
Asked:
Revolution9
  • 2
1 Solution
 
Jason C. LevineNo oneCommented:
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
0
 
Revolution9Author Commented:
I was afraid you'd say that.
0
 
Scott Fell, EE MVEDeveloperCommented:
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
0
 
Jason C. LevineNo oneCommented:
I was afraid you'd say that.

Sorry.  HTML is a stateless protocol...it doesn't know anything about anything.  Scripting is needed for almost all dynamic functionality.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now