PDA

View Full Version : CSS navigation to change background when being selected



mkf
08-16-2011, 01:48 AM
1) Script Title:
jQuery Multi Level CSS Menu #2

2) Script URL (on DD):
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

3) Describe problem:
hi everyone,

I recently learned css and jquery so I'm very green @ javascript.

This is my attempt:

http://mh-dev.org

My question is how can I change the background of the tab that I'm viewing.

In the css stylesheet I do have overrides for links (a:link, a:visited, a:hover)

An example is here:

http://www.nichesoftware.co.nz/

You can see that when the hompage is being view then the home navigation tab has different color than the other tab. When I go to a page in a sub-menu then the top level navigation tab of that menu changes color. And by saying so I mean I want the color to change while the page is being viewed and the mouse should no longer need to hover over the navigation tab. Code for the hover state has already been accomplished.

I have already posted a question at the CSS sub forum but I have yet to found an answer. Can I do what I want with tweaking the css alone or do I need to do that in the Javascript file (I have already tried a couple of solutions that I can think up but none does the trick)

Thanks,
mkf

azoomer
08-16-2011, 02:42 PM
It's not entirely clear to me what you are after, but if you want the background of the active submenu item to change background color you can utilize the class .active.
In the gray.css line 217 find this:


.primary-menu-inner ul.menu li.active-trail a.active {
background-color: blue !important;
color: #444444;
}
and add the background color of choice. Here it is made blue. Remember the !important otherwise it will be overruled

mkf
08-16-2011, 03:22 PM
It should be something like these pictures. At the moment the website which I'm writing only behaves as state2. I still want to make it behave like state1 - 3

1. Normal
http://i44.photobucket.com/albums/f27/mitsuminh/IT%20Tech/1-1.png

2. Hovering (nearly done)
http://i44.photobucket.com/albums/f27/mitsuminh/IT%20Tech/2-1.png

3. Navigate to somewhere within the "Software" list
http://i44.photobucket.com/albums/f27/mitsuminh/IT%20Tech/3.png

I looked for the theme of the example site and found out it was a Drupal theme called "Acquia Prosper". Still it beyond my current ability to understand these