WordPress.org

Ready to get started?Download WordPress

Forums

JQuery Mega Menu Widget
[resolved] Different colours per menu list (4 posts)

  1. quietcity
    Member
    Posted 2 years 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/

  2. quietcity
    Member
    Posted 2 years 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

  3. quietcity
    Member
    Posted 2 years 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

  4. remix4
    Member
    Plugin Author

    Posted 2 years 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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic