Twenty Twelve: gracefully handle displaying sub-menus in small navigation menu

[lancewillett]

Drew's design for the mobile view of this theme calls for a centered title, description, and menu.

Recently I tried to introduce a hierarchy to show the sub-menu items in the same list. See r21564.

Screenshot: ​http://f.cl.ly/items/0H0P0Y1c300i451U2E1A/Screen%20Shot%202012-08-23%20at%2012.07.01%20PM.png

Discussing in IRC today Nacin and others commented it's awkward to see indented items in a centered list.

Ideas to improve:

1. Don't show sub-menus in small navigation
2. Use a leading indicator, like an em-dash, to denote the hierarchy
3. Rework the layout to not use a centered navigation elements

[lancewillett]

I'm personally voting for 1. The only drawback I see is site owners can't show their entire menu to mobile visitors. Otherwise it's clean and simple, and stays true to the design vision.

[lancewillett]

Talked this over with Drew today—his goal was to show *all* menu items but without any hierarchy. That way there is nothing hidden, good for usability, but no indents to throw off the visual look.

In the end, somebody with a massive menu is going to have lots of items, but that's why we're hiding it by default.

The centered look is by design, and we'd like to keep it. (Acknowledging that the indented list looked pretty weird, though.)

[drewstrojny]

I played with this and really couldn't come up with anything I liked using CSS3 columns and I'm not a fan of option number 2.

I agree with Nacin, the menu isn't the best use of space if you have a ton of menu items, but it's really the only good way we can handle it right now. I'd vote we just stick with a centered navigation for all menu items and ignore indenting sub-menu items. I'd also be OK with hiding sub-menu items, but would prefer just including them centered.

I'm also quite open to suggestions and patches if someone has a good solution in mind for option number 3.

[emiluzelac]

Good approach to this is to get the menu act and be like dropdown (select) box, this way you will avoid centered menu and reduce so much unnecessary space.

Take a look at ​TinyNav.js

and slightly modify active for current items and voila!

// Responsive Menu (TinyNav.js)
jQuery(".menu").tinyNav({
    active: 'current_page_item', // Set the "active" class
    header: false // Show header instead of the active item
});

I tried showing all by default, users didn't like it, after that it was nice and centered, still many support questions "why oh why" and after Theme incorporated TinyNav.js everyone liked it.

And if you guys don't like that idea you can always use current setup and adjusted to be more like this ​RWD Nav Patterns

P.S. Keeping main menu only is great idea.

Thanks,
Emil

[lancewillett]

Replying to emiluzelac:

Good approach to this is to get the menu act and be like dropdown (select) box, this way you will avoid centered menu and reduce so much unnecessary space.

Take a look at ​TinyNav.js

That approach looks cool, though weird that it looks like a form element since that's not the exact interaction here.

Also, we aren't loading jQuery on the front-end at all, so we'd need a pure JS solution.

[lancewillett]

What do you think about having a new menu location in this theme for mobile / small devices?

That way if the user makes a trimmed-down menu and assigns it to that specific location they can choose how simple or complex to show it.

The trick is the fallback. If they don't assign a menu to that location, it'd go to wp_page_menu() which probably isn't a great idea.

[emiluzelac]

I styled mine to look like this ​http://i.imgur.com/VoHFl.png but if you guys don't want jQuery on front-end that's different story, I didn't know :)

New menu location for mobile devices? Wow, that's actually pretty cool idea. And it wouldn't be that difficult to implement, because you guys can easily assign "mobile" class to it and the only thing left after that is some logic when the menu will turn on, I mean "break" in Media Queries.

[lancewillett]

Another example of a mobile menu that displays all children in hierarchy is "Minileven" -- a mobile theme we use on WP.com that replaced WPTouch.

Example, menu open: ​http://cl.ly/image/293D29411s0w

Example, menu closed: ​http://cl.ly/image/3N1S2s0i270O

In behavior it's very similar to Twenty Twelve, though styled to be left-aligned and show a search bar also.

[lancewillett]

Test out Minileven at this test site: ​http://lancetest23.wordpress.com. With Safari just change the user agent from the Developer > User Agent menu to iPhone to see it on your desktop. Or go to that URL on a mobile device.

[lancewillett]

Looking at this more and thinking about the complexity, though there is room for improvement, the default styles work really well for the majority of cases where a small amount of navigation items are in the site menu.

For the cases with huge menus we can share tutorials on how to a) hide the sub-menus with CSS b) use a child theme to style the menu differently or 3) maybe activate a different mobile theme entirely.

Closing as worksforme since there isn't a convincingly better approach without redesigning it to look completely different.

[lancewillett]

In [21929]:

Twenty Twelve: update navigation script to check for missing button and menu children earlier; allows an empty menu to be set without showing the button. See #21678.