Please help me with active parent styling

Discussion in 'CSS' started by boneless, May 15, 2010.

  1. #1
    This problem is doing my head in!
    In one of my menus, I have succeeded in 'current' highlighting for child menu items, but I can't seem to get the parent to style when the child is the current page.
    Here is the html code for the parent (taken from the source so you can see the output):
    <div id="s5_accordion_menu"><div class="menu">
    <h3 class="s5_am_toggler active">
    <span class="s5_accordion_menu_left" />
    <a class="mainlevel" href="/euro/index.php/Products/VoIP-Gateway.html">
    <span>VOIP GATEWAY</span></a></h3>
    Code (markup):
    I've tried styling in the css
    #s5_accordion_menu h3.s5_am_toggler
    Code (markup):
    but it's a no go.
    Let's say the following is the (working) styling for the hover effect:
    #s5_accordion_menu h3.s5_am_toggler:hover {background: #A9AE9A;}
    
    Code (markup):
    How can I apply the same when that parent's child is the current?
    I can see it is cosidered active as it has the active class as well as the s5_am_toggler one.

    (I'm trying to change the background color and link color)

    Can any one make sense of this? nothing i do takes affect on this parent item when it is active.

    Thank you in advance guys, i'm really in a bind here.
     
    Last edited: May 15, 2010
    boneless, May 15, 2010 IP
  2. swashata

    swashata Member

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #2
    If you mean that you want to change the background color of the menu [or tab] when it is being clicked [or active and its content are being displayed], and if you are using jQuery accordion then you can use combination of CSS and Javascript... So here is the CSS and jQuery function
    CSS
    .active-menu {background: #A9AE9A; }
    Code (markup):
    jQuery
    $("#s5_accordion_menu .menu").click(function() {
        $(this).addClass("active-menu");
    });
    Code (markup):
    If you mean that each of the menu buttons loads different pages, then this whole thing has to be done with a little of PHP and jQuery! Tell me what you need! I will code the PHP if you want [Free of course :p ]
     
    swashata, May 15, 2010 IP
  3. boneless

    boneless Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you for the reply! :)
    I've managed to actually style the menu tabs when they are clicked/current.
    Let's say this is the menu structure:
    Parent A
    - Child
    - Child
    - Child
    Parent B
    - Child
    - Child
    etc.

    Changing the children when they are clicked is not a problem for me.
    I want to achieve the following:
    When viewing one of the children of Parent A, I'd like that parent to be styled in a certain way.
    The question is, if i have the following code output in html (that's the active parent btw):
    <h3 class="s5_am_toggler active">

    the active class is assigned to whomever the active parent is when i am viewing the child.
    How do I style that h3 tag in css?
    I know I have 2 classes in there - 's5_am_toggler' and 'active'

    Do I really need a JQuery function or am I missing somethingin the css?
     
    boneless, May 16, 2010 IP
  4. swashata

    swashata Member

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #4
    In that case, code it just like this:
    In case they are not showing up, use !important tag.. Say
    And you don't need to use jQuery if you are not using it already!
     
    swashata, May 16, 2010 IP
  5. boneless

    boneless Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I've done just that, and now I've tried it again and still it doesn't work, even with !important to bypass any inline style...No idea why.
    Thank you for trying to help, think it's time to bash the screen in...that usually fixes stuff, right?
     
    boneless, May 16, 2010 IP