Menus: add visual Indicator for menu items with children

[downstairsdev]

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.

[downstairsdev]

Visual Indicator Patch

[downstairsdev]

Screen Shot of Indicator

[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.

[lancewillett]

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.

[lancewillett]

Replying to downstairsdev:

I'll look into a patch for that next.

Try here first: #15214

[lancewillett]

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;
}

[lancewillett]

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

[hotchkissconsulting]

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

[hotchkissconsulting]

Updated patch which fixes default menu

[nacin]

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.

[hotchkissconsulting]

changed from array_key_exists() to isset()

[helen]

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.

[helen]

#15214 was marked as a duplicate.

[helen]

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.

[johnbillion]

#10597 was marked as a duplicate.

[celloexpressions]

#14687 was marked as a duplicate.

[McGuive7]

I realize this is closed, but I'd love to know what factored into the decision to split this out into two classes, one for wp_nav_menu() and one for wp_page_menu(). This requires including, at minimum, two CSS selectors when writing rules for parent pages in menus. Can I ask, why not just go with a global .has-children class? Semantically, the two class method doesn't really add any value, as there are already other classes indicating the type of item being output. I may be missing something, but it seems to me that the single class method is more in line with modular CSS practices, and if nothing else, just eliminates the need to include two selectors when styling. Can someone clarify, and/or is this worth re-opening for future improvements?