July 11, 2011 at 12:14 pm #4978
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:
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
// mega menu column
//mega 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?
DaveJuly 11, 2011 at 1:00 pm #48372
OK, I solved it with:
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)
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:
DaveJuly 12, 2011 at 5:27 am #48373
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.July 12, 2011 at 4:04 pm #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.
BTW – is the Menu management page with all the drag and drop a WordPress or a theme thing? It’s really awesome.July 12, 2011 at 4:26 pm #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.July 14, 2011 at 9:44 pm #48376
Just found something I really don’t like in avia.js!
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.
DaveJuly 15, 2011 at 4:57 am #48377
The topic ‘MegaMenu – highilghting selected path using classes’ is closed to new replies.