Spry navigation

[suzannefuller]

I am editing the css for my spry nav bar and want to be able to have a different background color for the tab for the page that is being visited. For example if you are viewing the "Shedules" page that tab would be a different color than the other tabbs in the nav bar indicating what page you are on. I do not see a style for that condition in the Menu Bar css. Does anyone know how to write a selector for that condition?

Thanks

[Dodger]

Hi,

I'm not familiar with that particular navigation system but...

Here are a few links that deal with that ... you can google "css current" or similar for even more.

http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/
http://www.search-this.com/2007/06/13/css-current-page-indicator/
http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css

Hope this helps a bit. :)

Daf

[suzannefuller]

Good references. Thanks.

[suzannefuller]

Still haven't found the solution to this. Anyone else have an idea?

[mitzs]

Hello Suzanne, I am not to this point yet. However, I have found this tut on Layers mag as a matter of fact.:) And what I am wondering if maybe you need to add a background color to the menu bar active? Look at the picture below. Now this is a guess out of the blue but try playing around with several of them there and see what results it gives you and even if your getting close.

http://www.layersmagazine.com/images/tutorials/design/dreamweaver/17/image12.jpg

Here is the link for the tut itself. I am curious now if you have the time will you please let me know how it goes.

http://www.layersmagazine.com/spry-navigation-dreamweaver.html

[mitzs]

Hey Suz, I found this on Adobe website, not sure if it is what you need but you might want to try it.

To change the background color of a menu item, use the following table to locate the appropriate CSS rule, and then change the default value

Now what I am wondering if it is this one you need to change.
Background color when in focus
ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus
background-color: #33C;


http://livedocs.adobe.com/en_US/Spry/SDG/index.html