Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#33703 closed enhancement (worksforme)

Menu Class: current_sub_item

Reported by: atomicjack's profile atomicjack Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.4
Component: Menus Keywords: close
Focuses: ui Cc:

Description

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?

Change History (7)

#1 follow-up: @swissspidy
9 years ago

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

#2 in reply to: ↑ 1 @atomicjack
9 years ago

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.

#3 follow-up: @swissspidy
9 years ago

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.

#4 in reply to: ↑ 3 @atomicjack
9 years ago

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.

#5 follow-up: @swissspidy
9 years ago

  • Keywords close added

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.

#6 in reply to: ↑ 5 @atomicjack
9 years ago

  • Resolution set to worksforme
  • Status changed from new to closed

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.

#7 @swissspidy
9 years ago

  • Milestone Awaiting Review deleted

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

Note: See TracTickets for help on using tickets.