[Plugin: JQuery Mega Menu Widget] Different colours per menu list

  • Resolved quietcity

    (@quietcity)


    14 years, 3 months ago

    Great plugin – love it! I’m trying to push it further by color-coordinating menu lists related to different categories, etc. I’ve figured out that if I add a CSS class to my menu item (in the WP Menu admin) I can get the menu items in the second and third level to change colour by this example:

    .menu-02 ul li.mega-hover a, .menu-02 ul li a:hover {background: #A41984 !important; color: #fff; text-shadow: none;}

    I can’t figure out how to define a new style for the top-level menu items which have a hover state, etc. Any ideas how to change the top level items with a CSS class?

    Thanks
    Len

    http://wordpress.org/extend/plugins/jquery-mega-menu/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter quietcity

    (@quietcity)

    14 years, 3 months ago

    Great success! I’ve figured out what and where to achieve separate colors for each menu list.

    I gave the top level menu items a CSS class (in my case: menu-01, menu-02, etc). Then I added this CSS code to my stylesheet (either in the skin or master):


    .menu-02 ul li.mega-hover a, .menu-02 ul li a:hover {background: #A41984 !important; color: #fff; text-shadow: none;}

    .menu-02 a.dc-mega:hover {
    background: #A41984 !important;
    }

    .menu-02 a.dc-mega:visited
    {
    background: #A41984 !important;
    }

    The first definition is for the drop-down menu items under the top-level list item. The second and third definitions are for the top-level menu item which activates the drop-down. At first I couldn’t figure out how to keep the hover state color active when I moved off the button and into the menu, but then I tried adding the pseudo class “:visited” to the tag, and *presto*, it works.

    I hope this is useful for others!
    Len

    Thread Starter quietcity

    (@quietcity)

    14 years, 3 months ago

    Ok, I got excited and spoke too soon… Forget the :visited pseudo class. It should have been :focus because if the top level page has not been visited, the previous hover state will override it.


    .menu-01 ul li.mega-hover a, .menu-01 ul li a:hover, .menu-01 a.dc-mega:hover, .menu-01 a.dc-mega:focus {background: #055695 !important;}

    Cheers
    Len

    Plugin Author remix4

    (@remix4)

    14 years, 3 months ago

    Hi,

    .menu-01 ul li.mega-hover

    The .mega-hover class is added by jQuery when the user is over the menu link.

    This class should remain if the user moves off the main link but into the sub-menu as the li tag is still wrapped around the sub menu. you should be able to use this to target any active styling

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘[Plugin: JQuery Mega Menu Widget] Different colours per menu list’ is closed to new replies.