Menu Class: current_sub_item

[atomicjack]

Hi,

I've been playing around with menus a bit, and noticed the absence of a CSS class to select currently selected drop-down item.

My aim is to be able to target only the sub-item of a menu that is selected, and not all current selected items.

Possibly add current_sub_item?

[swissspidy]

Can you give an example?

Quite a lot is possible with the current CSS classes. For example, the currently selected menu item has the class current., while its parent has a class like wp-has-current-submenu wp-menu-open menu-top

[atomicjack]

Replying to swissspidy:

Can you give an example?

Quite a lot is possible with the current CSS classes. For example, the currently selected menu item has the class current., while its parent has a class like wp-has-current-submenu wp-menu-open menu-top

So, as you mentioned, we're able to select the parent item, and the 'current' item, however, I would like to *only* be able to select the 'current' if it is a sub-item (i.e has a parent). From what I'm seeing currently, there are no CSS classes to do this at the moment.

[swissspidy]

current is for sub items only. Elements with this class always have a parent menu-top. Using CSS selectors you can basically address every item in the admin menu, even separators.

Feel free to prove me wrong here using a concrete example, perhaps with a screenshot.

[atomicjack]

Replying to swissspidy:

current is for sub items only. Elements with this class always have a parent menu-top. Using CSS selectors you can basically address every item in the admin menu, even separators.

Feel free to prove me wrong here using a concrete example, perhaps with a screenshot.

There's no menu-top on this:

Parent:

menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-42

Dropdown/Sub:

menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-200 current_page_item menu-item-217

From that, I can't see anyway to select just current sub-items, rather than any current item.

[swissspidy]

Yikes, I was somehow thinking of admin menus...

I don't see how this shouldn't be possible for custom menus though.

You could use .sub-menu .current-menu-item or .current-menu-ancestor .current-menu-item to get only current sub menu items. Using selectors like .menu-item > ul > .current-menu-item or .menu-item > ul > li > ul .current-menu-item you can even target specific levels of nested sub menu items. CSS is very powerful in this regard.

[atomicjack]

Replying to swissspidy:

Yikes, I was somehow thinking of admin menus...

I don't see how this shouldn't be possible for custom menus though.

You could use .sub-menu .current-menu-item or .current-menu-ancestor .current-menu-item to get only current sub menu items. Using selectors like .menu-item > ul > .current-menu-item or .menu-item > ul > li > ul .current-menu-item you can even target specific levels of nested sub menu items. CSS is very powerful in this regard.

Got it, a little differently to what you put though, it won't work following those nested classes for some reason.

[swissspidy]

If you need any further help with this, just ping me on Slack.