MegaMenu - highilghting selected path using classes « Support Forum | Kriesi.at

Support Forum » Broadscope

MegaMenu - highilghting selected path using classes

7 posts from 2 voices

Started 1 year ago by davestewart
Latest reply from Dude
This topic is not a support question

Tags:

davestewart
Member
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
Posted 1 year ago #
davestewart
Member
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
Posted 1 year ago #
Dude
Dude

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.

Posted 1 year ago #
davestewart
Member

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.

Posted 1 year ago #
Dude
Dude

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.

Posted 1 year ago #
davestewart
Member

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

Posted 1 year ago #
Dude
Dude

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

Posted 1 year ago #