2 replies [Last post]
scottba
Offline
newbie
Chicago Suburbs
Last seen: 14 years 2 days ago
Chicago Suburbs
Timezone: GMT-6
Joined: 2006-09-18
Posts: 5
Points: 0

I've created a horizontal navbar and have successfully used CSS to highlight the current page using the body id="" method along with different .classes for each li in the horizontal nav.

I also have a secondary navbar which is vertical (on the left) with several options. So, there is a different set of secondary navbar options for each of the horizontal navbar buttons. What I can't figure out is a method to accomplish the highlighting technique on the secondary navbar like on the horizontal.

So, for example, I'm using this technique on the horizontal bar where body id="about_us" and one of the li's in my nav list has a .class="about": #about_us .about a { some rules }. I guess you could consider /about/ a directory and then "Mission" (mission.html) is a 'sub' page vertical nav item I'd like to highlight at the same time.

Can someone point me in the direction of how to achieve the highlighting of the current page in the vertical navbar using CSS? Or maybe I can't use CSS and have to use server side (which I don't know much about - but will learn!)

Thanks so much!
-Scott

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You can use CSS. The

You can use CSS. The technique you are using gets messy when there are lots of options or there are submenus involved. Its often easier to use a "selected" class on the appropriate item.

Using the body technique, you'll need an antecedent element with an id to match your submenu item.

body id ... mission
menu item class ... about
submenu item class ... mission

#mission .about { /* selected menu item styles */ }
#mission .mission { /* selected submenu item styles */ }

Every page in the about submenu will have a selector to target the about menu item. e.g.

#mission .about,
#people .about,
#contact .about { /* selected menu item styles */ }

scottba
Offline
newbie
Chicago Suburbs
Last seen: 14 years 2 days ago
Chicago Suburbs
Timezone: GMT-6
Joined: 2006-09-18
Posts: 5
Points: 0

thanks for that.

It worked perfectly for me.

-Scott