Configure dropdown menu

[ghost]

I'm wondering how to configure the dropdown menu in BD core? It changes to a 'mobile' menu at around 768px, but I want to change that to be smaller. Also, there's no 'hamburger' menu option; all menu items are shown by default on small screens. Finally, when you have a parent menu item that you want to click on, you have to essentially double-click on it - once to expand the children, and then again to navigate to the parent link's URL. At the same time, the children disappear, so it seems that clicking the parent the second time simply closes the child menu, until you're taken to the parent's URL and you're left wondering what happened.

I guess I'm used to Superfish for Drupal and being able to configure all these things, so maybe this is a feature request...

[olafgrabienski]

[The dropdown menu] changes to a 'mobile' menu at around 768px, but I want to change that to be smaller.

There is no setting yet afaik, but you could override the relevant CSS definition as a workaround. If your site runs with the Basis theme, in /core/themes/basis/css/component/menu-dropdown.css you'll find:

@media (min-width: 48em) {
  (...)
  .js .menu-dropdown > li {
    float: left;
  }

Overriding the min-width value for this li element with for instance 25em would display the mobile menu only on screen widths below 400px.

---

Also, there's no 'hamburger' menu option; all menu items are shown by default on small screens.

The hamburger menu didn't make it in the release but I understood that it should be added. See the issue summary on #2107 (comment) and @quicksketch's proposal in #2107 (comment):

My thought is to have Basis implement a hamburger but exclude that from Bartik. Basis would likely do this through a combination of JS, theme_menu_tree(), and additional CSS.

I'm not aware that such a implementation has started. Does anybody know? (@quicksketch @klonos @wesruv) If not we should create an issue to add the missing hamburger menu setting.

---

Finally, when you have a parent menu item that you want to click on, you have to essentially double-click on it - once to expand the children, and then again to navigate to the parent link's URL. At the same time, the children disappear, so it seems that clicking the parent the second time simply closes the child menu, until you're taken to the parent's URL

What would you prefer here? A setting to change the behaviour, or just a different behaviour, and which one?

---

Links:

• Provide responsive drop-down menus out of the box: [UX] Provide responsive drop-down menus out of the box. #2107
• Other follow-up issues I am aware of so far: [UX][A11Y] Drop-down menus: add opacity or different background colors on :hover and active trail. #2160 , [UX] Drop-down menus: 1st item in long menus is hidden under the admin bar. #2161

[ghost]

Thanks for the response @olafgrabienski

What would you prefer here? A setting to change the behaviour, or just a different behaviour, and which one?

I understand that this is what some people are used to, so I'd like at least the option to change this behaviour to one of the following:

1. Clone the parent link into the child menu so that the parent link simply becomes an open/close button for the child menu and the parent's URL is accessed through the cloned link.
2. Make the parent link link only to it's URL, and leave the opening/closing of the child menu to the +/- sign on the right.

[olafgrabienski]

In my opinion, both of the options are reasonable. @BWPanda Could you make a feature request only for the parent menu behaviour issue and mention it's a follow-up of #2107 like @klonos did in #2160 and #2161? We can then discuss there which behaviour makes more sense, and if it should be an option or by default.

I'll make a separate issue regarding the hamburger menu, probably tomorrow.

[laryn]

@olafgrabienski I pulled out some of the earlier Gitter conversation about the hamburger into an issue here:
#2369

[olafgrabienski]

@laryn Perfect, thanks for being faster!

[wesruv]

Re: changing the breakpoint for the responsive menu via code, I had a thought for that.

The "no js" experience would be what it is now, in order to change it you override the stylesheet for the menu. We'd also add .nojs in front of all of the desktop styles in the @media query in the menu stylesheet (see why below).

The default JS experience would auto-detect when the menu doesn't fit in it's space and turn to responsive version then. Thinking we'd have a lightweight script that checked to see if the last menu item is wrapping and if so apply a class. That class would do what the media query is currently doing, but they wouldn't be inside of any media query.

We could add a configuration setting for the width the menu should change to desktop version, the JS that would have auto-detected could check to see if that setting is set before it does any of it's work and use the static width instead of the menu's width.

Though I'm not sure how much people will want to use that if the menu can auto-detect.

The auto-detection stuff is currently being done in the responsive admin tabs that are in Seven and Basis, I believe the code has been abstracted to the point where we can use the same functionality for the responsive menu and the admin tabs.

[ghost]

@BWPanda Could you make a feature request only for the parent menu behaviour issue and mention it's a follow-up of #2107? We can then discuss there which behaviour makes more sense, and if it should be an option or by default.

Done: #2370

[klonos]

Thanx for filing the follow-up issues guys. Still trying to catch up with the queue.

[ghost]

I think what questions I had have either been answered, or subsequent issues opened. So closing this issue now.