Menu icon Foundation
Top Bar - problem with dropdown when clickable

Hi,

I've encounter the following problem: if navigation bar has multi level dropdown, and the is_hover option is set to false, clicking links from submenu which lead to another dropdown instead of showing this menu, lead directly to link specified in href.

However, the top level elements don't act like that. If they have defined href, first click expands dropdown, and the second redirects to destination page.

I've tested it (Chrome, Firefox and Safari) and the problem occurs either on OS X, and Windows with one exception - Safari on OS X, this is the only browser where all menu elements having dropdown expand menu on first click, and take to href link on the second.

In my opinion behaviour of Safari is the most reasonable, and I would like Top Bar to act like that everywhere. How can I do that?

Thanks for help!

Foundationtop-barnavigationis_hoverclickabledouble click

Hi,

I've encounter the following problem: if navigation bar has multi level dropdown, and the is_hover option is set to false, clicking links from submenu which lead to another dropdown instead of showing this menu, lead directly to link specified in href.

However, the top level elements don't act like that. If they have defined href, first click expands dropdown, and the second redirects to destination page.

I've tested it (Chrome, Firefox and Safari) and the problem occurs either on OS X, and Windows with one exception - Safari on OS X, this is the only browser where all menu elements having dropdown expand menu on first click, and take to href link on the second.

In my opinion behaviour of Safari is the most reasonable, and I would like Top Bar to act like that everywhere. How can I do that?

Thanks for help!

Rafi Benkual about 4 years ago

I'm not seeing that behavior on the docs example. http://foundation.zurb.com/docs/components/topbar.html#clickable-top-bar

Are you adding a destination link in the parent href?

Dawid Dwornicki about 4 years ago

Yes, I add destination links, and it makes the difference.

It would be great (and in my opinion the most reasonable) if the first click on any element with .has-dropdown could expand lower level, and the second take to destination link.

Do you have any idea how to do that without any "tricks" and many lines of additional code?

Dawid Dwornicki about 4 years ago

There's another strange thing that I've noticed. When I click top level link it expands dropdown. Then, when I click lower level with .has-dropdown (for example with href="#") it append # to address, and close whole dropdown (remove .hover classes). But if I go right after that to another tab of my browser, and get back to tab with Top-Bar the menu is expanded in the right way, and classes .hover are in right elements ?!

I can't say why it's happening. As I wrote before, there are no problems on Safari, but it happens in Chrome and Firefox. Maybe it will be some hint.

Karolis Aleksiejus about 4 years ago

I have exactly the same problem, however if i right click submenu, it expands.
Dawid, have you solved it?

Dawid Dwornicki about 4 years ago

Unfortunately no :\ Finally I built up my menu in another way. I don't have time to work this out, but I hope that somebody will find a solution.

Zach Watkins almost 4 years ago

I am having this issue as well.

In Foundation 5.0.2, we could have linked text in a submenu item which had its own submenu.

In Foundation 5.5.3, we cannot.

Was this an intentional change, or is this a bug that needs to be fixed? We rely on the click-to-open version of top bar for accessibility reasons, so we do not want to switch to a hover menu.

Update: I have reported this as an issue in GitHub: https://github.com/zurb/foundation-sites/issues/7468