Twenty Fourteen: Drop Down Menu icons

[binarymoon]

Don't know if this is desirable or not - but personally I find it much easier to use a sites navigation when there's some way to tell if a menu has a sub-menu (drop down) - however 2014 currently doesn't do this.

I've attached a mockup of what I would do. I've actually made it work so can add a patch if anyone wants to test. Would need to be tweaked so that it works well with rtl languages but otherwise it works fine for ltr.

[binarymoon]

screenshot showing what I would do with the menus for 2014 to show when there is a dropdown available

[binarymoon]

Kind of related to this - I am a little obsessed with css transitions at the moment. Is there any reason to not add them to the menus to add a subtle fade in and out?

[binarymoon]

A patch that adds the little icons to the menu items for both the ltr and rtl

[celloexpressions]

Replying to binarymoon:

Kind of related to this - I am a little obsessed with css transitions at the moment. Is there any reason to not add them to the menus to add a subtle fade in and out?

#25553, unfortunately.

Anyway, I like this. Remember seeing a ticket for this for Twenty Thirteen, can't find it, but I believe there was a technical issue with it. Your patch looks very concise and works (does need coding standards clean up, doesn't need the .primary-navigation ul ul a part, didn't check rtl, shouldn't happen for mobile), though, so I think the only limit would be whether we want it in the design.

Worth noting that it is very useful to have indicators that there's a dropdown for touch users. This tells the user that they need to play the try-to-trigger-the-submenu-but-not-the-link game or allows them to utilize the browser's solution to that issue (pressing and holding in IE11, for example).

[binarymoon]

Thanks for letting me know about the transitions. Shame, but agreed consistency is good.

The ".primary-navigation ul ul a" bit is there so that all menu items stretch to full width (which is only visible when there's an item being hovered). Could use box-sizing instead so that the padding gets absorbed? Or could just remove - but does mean there's a gap in some situations (when there's sub sub menus).

Have tidied up the css - hopefully that's all that's needed in terms of css coding standards? Gonna add a patch in a sec.

[binarymoon]

updated code (for coding standards) and fixed issue with arrows displaying on mobile menu

[celloexpressions]

Replying to binarymoon:

The ".primary-navigation ul ul a" bit is there so that all menu items stretch to full width (which is only visible when there's an item being hovered). Could use box-sizing instead so that the padding gets absorbed? Or could just remove - but does mean there's a gap in some situations (when there's sub sub menus).

Oh, I see the gap now. I had ended up with max-width there instead of min-width, so it was messing up the layout. Leave that in.

Have tidied up the css - hopefully that's all that's needed in terms of css coding standards? Gonna add a patch in a sec.

I think you got everything except "tabs, not spaces" for indentation. There's also a space at the end of each line that should be removed (I'm guessing your text editor added those). Patches should also be made relative to the WordPress root.

[binarymoon]

Thanks for the infos. I think Netbeans must be messing up the formatting when I export the patch since I already use tabs, and have netbeans set to trim whitespace from the end of lines. I'll have to see if I can use something else to export the patch file - I guess I could always try to do it on the command line :)

[binarymoon]

made the arrows a pixel smaller (it feels better) and exported the code on the command line which should sort out the coding standards issues

[iamtakashi]

I'm not against this idea but I'm curious why it's removed from Twenty Thirteen.

@binarymoon,
if we add arrows, we definitely need to do for the fly-out secondary navigation also.

For the primary navigation, I'd position the arrows align vertically to the middle rather than the top as it's currently, and little more closer to each menu item.

[binarymoon]

Hey Takashi - in my diff the icons are pointing right on the secondary flyouts so hopefully that's ok. Happy to tweak the position slightly also.

I'm intrigued to know why they weren't used in 2013 also.

[iamtakashi]

Replying to binarymoon:

Hey Takashi - in my diff the icons are pointing right on the secondary flyouts so hopefully that's ok. Happy to tweak the position slightly also.

I meant the secondary navigation on the left sidebar, not the third level menu item in the primary navigation.

[binarymoon]

ah - gotcha. Didn't realise those did the dropdown thing. Will have a look at that this evening and see if I can add it in.

[SergeyBiryukov]

Replying to celloexpressions:

I think you got everything except "tabs, not spaces" for indentation. There's also a space at the end of each line that should be removed (I'm guessing your text editor added those).

FWIW, TwentyFourteenMenu.2.patch​ looks good to me in terms of formatting. It uses tabs and doesn't actually have spaces at the end of each line. It's just how Trac displays it.

[binarymoon]

Thanks for the confirmation Sergey! :)

[binarymoon]

tweak arrow position, and make secondary navigation styles work

[celloexpressions]

Finally found the Twenty Thirteen ticket (they turned it into a core ticket, should've made a new one): #23834.

The only hold-up was the lack of the has-children class. Now that that's available, we should make it happen (could also revisit it for Twenty Thirteen).

[iamtakashi]

@binarymoon

I worked on this a bit further and made a patch ​26200.5.diff based on yours. Here are notes for you and I hope you find these useful.

• The arrows need be added separately to the primary and the secondary navigation with different break points because the secondary navigation remains the mobile style until wider browser width. With your patch, arrows for the secondary navigation had appeared weird places when browser width is between from 782px to 810px.
• The arrows should also be added to the fallback page menu so that users who don't set a custom menu also see the arrows.
• Making the width of .primary-navigation ul ul a flexible with min-width does prevent the gap but I'd like to keep the width of the children the same regardless having grand children or not.
• I believe there is no need to specify sizes of the arrow with width: 0 and height: 0, and restating it as block element.
• I made the arrow a little bit smaller and tweaked its position.
• Let's use double quotes per ​CSS coding standards.
• I personally like ordering properties alphabetically with certain exceptions.

This is an awesome suggestion, thank you!

[binarymoon]

@iamtakashi - that's great. Awesome to see it being included :)

Thanks also for the pointers on the improvements you made.

[lancewillett]

In 26587:

Twenty Fourteen: enhance main navigation usability by adding in visual indicators for existence of submenu items. Props binarymoon, iamtakashi. Fixes #26200.

[yoavf]

RTL in this changeset wasn't good enough - attaching patch

[nacin]

In 26796:

Twenty Fourteen: RTL fixes for the navigation.

props yoavf.
fixes #26200.