WordPress.org

Make WordPress Core

Opened 13 months ago

Closed 7 months ago

Last modified 3 months ago

#23834 closed enhancement (fixed)

Menus: add visual Indicator for menu items with children

Reported by: downstairsdev Owned by: helen
Milestone: 3.7 Priority: normal
Severity: normal Version: 3.6
Component: Menus Keywords: has-patch
Focuses: Cc:

Description

It's helpful to have a visual indicator when a top level menu item contains a hidden drop down menu.

This patch adds a filter to wp_nav_menu_objects in order to add the class "has-children" to top level menu items that contain children. This allows us to style it with psuedo element, similar to how the menu-toggle is styled for smaller screens.

The filter I used was posted by @chipbennet on the WordPress Theme Reviewers List. The same functionality could also be achieved by a Custom Nav Walker (see http://wptheming.com/2013/03/drop-down-menu-indicator/), but Chip's solution seemed more straightforward.

Neither method works unless a menu has actually been set.

Attachments (6)

dropmenu-visual-indicator-1.diff (1.7 KB) - added by downstairsdev 13 months ago.
Visual Indicator Patch
indicator.png (13.9 KB) - added by downstairsdev 13 months ago.
Screen Shot of Indicator
23834.diff (1.1 KB) - added by hotchkissconsulting 8 months ago.
23834.2.diff (2.3 KB) - added by hotchkissconsulting 8 months ago.
Updated patch which fixes default menu
23834.3.diff (2.3 KB) - added by hotchkissconsulting 8 months ago.
changed from array_key_exists() to isset()
23834.4.diff (2.0 KB) - added by helen 7 months ago.

Download all attachments as: .zip

Change History (20)

downstairsdev13 months ago

Visual Indicator Patch

downstairsdev13 months ago

Screen Shot of Indicator

comment:1 follow-ups: downstairsdev13 months ago

Alternatively, a "has-children" class could just be added to the menus in WordPress core so that it is available to all themes. I'll look into a patch for that next.

comment:2 obenland13 months ago

  • Component changed from General to Bundled Theme
  • Version set to trunk

comment:3 in reply to: ↑ 1 lancewillett13 months ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 3.6

Replying to downstairsdev:

Alternatively, a "has-children" class could just be added to the menus in WordPress core so that it is available to all themes. I'll look into a patch for that next.

That would be much better -- that way *all* themes can take advantage of the class and style it as they wish.

comment:4 in reply to: ↑ 1 lancewillett13 months ago

Replying to downstairsdev:

I'll look into a patch for that next.

Try here first: #15214

comment:5 lancewillett13 months ago

  • Keywords has-patch removed
  • Milestone changed from 3.6 to Future Release
  • Summary changed from Twenty Thirteen: Visual Indicator for Drop Down Menus to Twenty Thirteen: add visual Indicator for menu items with children

Chatted about this a lot today during IRC office hours log, and also got an opinion from Joen.

It's a bit late to get the core change in before beta, so we'll punt this to a future release. In case it's helpful, here is some example CSS from Joen to style (based on proposed class names in #15214):

.menu-item-with-sub-menu,
.page_item_with_children {
  content: ‘\f502′;
  font: 8px/1 Genericons;
  -webkit-font-smoothing: antialiased;
  margin-left: 6px;
}

comment:6 lancewillett9 months ago

  • Component changed from Bundled Theme to Menus
  • Milestone changed from Future Release to 3.7
  • Summary changed from Twenty Thirteen: add visual Indicator for menu items with children to Menus: add visual Indicator for menu items with children

Reminder that this is a core change, not just in this theme.

comment:7 hotchkissconsulting8 months ago

Patch added-- this will add the "menu-item-parent" class to parent menu items

hotchkissconsulting8 months ago

hotchkissconsulting8 months ago

Updated patch which fixes default menu

comment:8 hotchkissconsulting8 months ago

  • Keywords has-patch added

comment:9 hotchkissconsulting8 months ago

  • Cc hotchkissconsulting added

comment:10 nacin8 months ago

Nice! At a glance, 23834.2.diff looks good. I will note that if we're going to store our data in the key (for speed and easier reduced duplication), we should use isset() rather than array_key_exists(). The latter is only necessary when were are possibly dealing with a null value. In this case, the values are all booleans.

hotchkissconsulting8 months ago

changed from array_key_exists() to isset()

helen7 months ago

comment:11 helen7 months ago

23834.4.diff - renamed some variables for clarity and changed the class names to be more semantic: menu-item-has-children and page-item-has-children. Tested with wp_nav_menu() and wp_page_menu(). I'm good with it - happy to drop it in at somebody else's okay.

I think at this point, however, we are dupe-ing #15214. Or rather, this should be closed (as we're not adding a visual indicator) and we should use #15214 instead.

comment:12 helen7 months ago

#15214 was marked as a duplicate.

comment:13 helen7 months ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 25602:

Add classes to menus to indicate that an item has sub-items: .menu-item-has-children for wp_nav_menu() and .page_item_has_children for wp_page_menu(). props hotchkissconsulting. fixes #23834.

comment:14 johnbillion3 months ago

#10597 was marked as a duplicate.

Note: See TracTickets for help on using tickets.