Results 1 to 3 of 3

Thread: CSS navigation to change background when being selected

  1. #1
    Join Date
    Aug 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default CSS navigation to change background when being selected

    1) Script Title:
    jQuery Multi Level CSS Menu #2

    2) Script URL (on DD):
    http://www.dynamicdrive.com/style/cs...el_css_menu_2/

    3) Describe problem:
    hi everyone,

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

    This is my attempt:
    Code:
    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:
    Code:
    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

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

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

  3. #3
    Join Date
    Aug 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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


    2. Hovering (nearly done)


    3. Navigate to somewhere within the "Software" list


    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •