2

For an example of this menu, check this quick code snippet I made on jsFiddle:

https://jsfiddle.net/27w3y6dh/

Our own menu is somewhat more complex, but suffers from the same issue. Additional complexity brings that the submenu doesn't depend on what's selected in the top menu for the most part. All dropdowns on the top menu are for 1 group that doesn't show a submenu (essentially quick actions), and then the top menu has 2 buttons that bring you to different pages (for administrative purposes), where each page has a separate submenu that doesn't change as long as you're in a page that is linked to by that submenu.

mockup below. The blue is an indication of the currently selected page, so the first menu only appears when icon 2 is selected. Everything to the left of the icons doesn't have a menu. The items on the right don't have a menu either. In the example, dropdown 2 is expanded and covers up dropdown 2 in the submenu.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

As you can see, if you move your mouse over one of the top dropdown menus (marked as "mouse over me"), the menu directly below is hidden behind the revealed element. This means that if you accidentally overshoot the bottom menu, you end up having to move your mouse away from the top menu so it disappears. this isn't really a user-friendly, and should be fixed.

We have considered making the top menu clickable and the bottom menu hoverable, but that means they have inconsistent behaviour, and we don't want to make both menus clickable because that means the user needs an extra click to make it work. A delay would make the menu less responsive.

Is there an option that would retain responsiveness, minimizes the number of clicks and still allows both menus to have the same behaviour?

  • Have you considered using click menus in both places, instead of hover menus? Either of the hover menus could get in the way of what the user is doing (not just the top one) if they're moused over accidentally. Consider standard Mac or Windows system menus. I'm glad they don't activate on hover. – Samuel Bradshaw Apr 26 '17 at 13:50
  • Edit (ignore my comment above): I just read a bit more carefully and you said that you don't want to make both menus clickable. I'd encourage you to reconsider that option. – Samuel Bradshaw Apr 26 '17 at 14:07
3

You can add padding to the menu to have it more inline. This is not ideal since you have a smaller hit area compared to the whole menu item. See image below.

enter image description here

This way there's always a part of the underlying menu item visible.

Another suggestion could be this

However, I'd consider changing the 2x2 menu structure. It complicates your navigation greatly as you say yourself.

Try having either a horizontal menu with the submenu below or a vertical menu with the submenu to the side. See image below.

enter image description here

Edit

Added another example of the above mentioned idea but now also considering Alvaro's comment about the right menu items.

enter image description here

The menu width depends on the length of the labels, but I think the menu items to the right will still be visible.

  • i was also making the same thing – uttham Apr 26 '17 at 10:11
  • 1
    +1 Great idea about displacing the sub-menu to a side so the below header can still be reached. Only consideration is to still keep the bottom-right header reachable. – Alvaro Apr 26 '17 at 10:15
  • With the padding it is still possible that the menu covers the item that's next to the item directly below. Rethinking the structure is the better solution. +1 for both suggestions. – jazZRo Apr 26 '17 at 10:20
  • it's not a 2X2 menu structure. it's just a simplification. The top menu is 2 links, 3 dropdowns, 2 links in a large font, and the submenu is around 10 dropdowns in a smaller font. Changing the structure of the menu is not really an option. – Nzall Apr 26 '17 at 10:45
  • 1
    @Nzall Can you add a wireframe of how the menu looks? – Nick Groeneveld Apr 26 '17 at 10:58
0

If you have the sub-menu connected to its header, the header next to the other headers both vertically and horizontally, I think at least one of the premises needs to be changed:

  • all headers are in the same line and the sub-menu displays below each of them
  • the headers are one over the other and the sub-menu displays on the side of its header
  • the header is not connected to its sub-menu: for example, the sub-menus always appear in the same place and have a little delay so the mouse can go from the header to the sub-menu before it fades out.
  • sub-menu opens on click: this doesn't solve the problem but if you need to stay with your layout you might want to consider. You need to balance if it is easier/more intuitive to click a second time to close this sub-menu or to move the mouse away and come back.

The first two options are the way I would go. You can always change from one to the other: in large screens have the menu horizontally but when the screen is not wide enough display it vertically. Or leave the elements that don't have a sub-menu under a More button which shows them vertically.

  • The submenu is not connected to the header. I've clarified what our menu looks like. – Nzall Apr 26 '17 at 10:43
0

I don't really think you can circumvent the issue other than by increasing the hit area with proper padding.

I always try to avoid having two layers of horizontal navbars, because of the issue with overshooting your target. I'm pro 2 layers vertical navigation or a combination with horizontal main nav and vertical sub nav. But I know this is not always possible in every situation and you probably have to work with the card that you are dealt.

I have an other suggestion though. Just one layer of horizontal navigation where the submenu replace the main menu and adds the possibility of returning to the main nav.
Cons:
1. Less discoverability of main navigation links when in submenu
2. Extra clicks for navigation
Pro:
1. This pattern is well suited for smaller viewports (responsive)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.