Css Html JavaScript - Navigation Highlight current selected Menu

Question

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

luckykind · Accepted Answer · 2009-12-04 20:17:34Z

1

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...

answered Dec 4, 2009 at 20:17

luckykind

4593 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SurfingCat Over a year ago

Parsing with php, like i said? There is no smarter way

luckykind Over a year ago

Is it one page and you are changing the content on the page? or are these different pages? If it's the former, which it sounds like... you can use a cookie, some script... or if the url changes/variable passed you can check against/parse it. If it's the latter, then I'd just use a variable before any header information is fired and go from there... just depends on your set up.

jeffreyveon · Accepted Answer · 2009-12-04 16:57:01Z

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.

edited Dec 4, 2009 at 16:57

answered Dec 4, 2009 at 16:51

jeffreyveon

13.9k18 gold badges88 silver badges142 bronze badges

2 Comments

SurfingCat Over a year ago

The problem is, i got only one php page with dynamic content. How can i give this page the right body id?

jeffreyveon Over a year ago

You can parse the URL. Chuck of the extension and use the file name as an ID?

Collectives™ on Stack Overflow

Css Html JavaScript - Navigation Highlight current selected Menu

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related