Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #4978

    HI there,

    I see the mega menus are liberally populated with classes, I presume so I can style my menus appropriately. I’ve having some difficulty with using the following selectors though:

    li.menu-item.current-menu-item
    li.menu-item.current-menu-ancestor

    I’m trying to style the menus so the current items are differently styled, but because li elements are used for both items and blocks, this is difficult.

    The elements have the following classes:

    // top menu item
    menu-item
    menu-item-type-post_type
    menu-item-object-page
    current-menu-ancestor
    current_page_ancestor

    // mega menu column
    menu-item
    menu-item-type-taxonomy
    menu-item-object-category
    current-category-ancestor
    current-menu-ancestor
    current-menu-parent
    current-category-parent
    avia_mega_menu_columns_5

    //mega menu item
    menu-item
    menu-item-type-taxonomy
    menu-item-object-category
    current-menu-item

    The problem here is the mega menu column. Because it is also an ancestor, the whole column is being highlighted, when I only want the menu items to be highlighted.

    I don’t see enough granulation between the columns and the items right now to do this. I don’t want to use a :not(.current-category-parent) selectors as :not() is not widely supported.

    Can you help?

    Thanks,

    Dave

    #48372

    OK, I solved it with:

    .current_page_ancestor
    .current-menu-item

    I’m loving the theme, and I think the mega menu works great straight out of the box, but I think the markup / css could do with just a bit of a tidy-up / tweak, to differentiate items and blocks. At the moment, they are almost identical:

    menu-item menu-item-type-taxonomy menu-item-object-category avia_mega_menu_columns_5 (block)
    menu-item menu-item-type-taxonomy menu-item-object-category (item)

    Perhaps…

    block / item
    column / row
    branch / leaf

    … there’s a tonne you could use. I know because I built a PHP 5 OO menu system for the Kohana framework! Might want pinch some ideas:

    http://kohana.keyframesandcode.com/docs/modules/nav/styling/menu-types.php

    Cheers,

    Dave

    #48373

    Hey,

    glad that you got it to work :) – btw you can add custom classes to menu items by using the class option field which can be activated for the menu editor.

    #48374

    That’s a nice tip, thanks.

    I think what I’m probably going to do is add a jQuery script to walk the menu system on each page load, and run some kind of comparison function on the href compared to the window.location – that way I can filter out such things as “/category”, so that anything matching “/support” will be highlighted as the current path.

    I’ve not tested it yet, but it should be quite doable.

    Cheers,

    Dave

    BTW – is the Menu management page with all the drag and drop a WordPress or a theme thing? It’s really awesome.

    #48375

    It’s a wordpress standard feature since WP3.0 – that’s why hacks, etc. should be based on hooks because plugins, etc. can also interact with the menu function.

    #48376

    Just found something I really don’t like in avia.js!

    function megaDivShow(i)

    {

    ,,,

    megaItems.filter(‘:eq(‘+i+’)').find(“>a”).stop().animate({paddingBottom:10},200);

    }

    Animating the padding bottom actually makes my install look buggy, as it protrudes over the div below, making look like the below div’s border is too thin.

    I set the paddingBottom to 0, and it looks great.

    Cheers,

    Dave

    #48377

    Thanks – I’ll report it to Kriesi. Maybe he wants to adjust this line for upcoming themes or updates.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘MegaMenu – highilghting selected path using classes’ is closed to new replies.