Thread

I have a basic top level navigation bar: Home About Contact Products ...etc
Each is styled by CSS. Each has an id that matches the first part of the url string (ex: http://www.domain.com/contact  and the contact link has an id of “contact”). When a user is in a particular section, I want that link in the navigation to have a class=“selected”. Easy enough. Although I’d like it to happen dynamically. I want to have 1 navigation template that gets included in all the other templates, and then some sort of script looks at the first url segment then sets the class to “selected” of the tag with an id of the first url segment. Is this something that could be done with javascript? Is there a better way to do this?

There is a better way courtesy of Derek Jones:

http://ellislab.com/blog/entry/behind_the_curtain_part_one/

I’d go with either the approach Stephen mentioned or give the body tag of each page an id and the menu item a class name that matches the id of the various body tags.

Then you could do something like the following:

#home .home,
#about .about,
#contact .contact,
#products .products {
   Your CSS code for the selected nav menu.
}