Css Html JavaScript - Navigation Highlight current selected Menu

Question

Hello, i think this question is very easy but I don't know if i am right. I am an oldschoool html, php coder. I want to use this kind of navigation: http://www.cssportal.com/horizontal-menus/13styles.htm

So far no problem. I got an dynamic php page and i want to use this Menu. There is no problem without this line in the HTML Part:

  <li><a href="" title="" class="current"><span>LINK</span></a></li>

The Problem is the class. What is the smartest way to detect which link is now current? I would do it in this way. I would write a php script like this pseudo code:

if acutaldocument == "link1.html" then echo "class='current' ";

But i think this is not the smartest way. Or am I right? Thanks

Answer 1

Give each page's body tag an ID. Say, you give the About page's body tag the id "about". Give IDs for all your navigation <li>s too. Say, you give "about" id to the navigation <li>

In your CSS file, do this:

body#about li#about {
   // apply differentiating style here...
}

You can keep doing that for all other pages also. And only when both the body ID and the <li> ID match, the style is applied.

Answer 2

There's many options...

You can use session cookies, JavaScript, you can pass an id on the end of the url (eg. ?nav=2) or parse the URL and check against it...

All of them work... all of them have there pros and cons... just depends on how your page is set up...