Menu icon Foundation
Topbar dropdown, both clickable and hover?

Hello,

I have pretty simple issue, but I cant find the solution anywhere. How to make topbar dropdown menu item both clickable and hover?

I use Foundation-5.0.2.

Thank you

topbardropdownclickablehover

Hello,

I have pretty simple issue, but I cant find the solution anywhere. How to make topbar dropdown menu item both clickable and hover?

I use Foundation-5.0.2.

Thank you

Rafi Benkual over 5 years ago

On a mobile device, when you click the mobile menu icon, it opens the menu until an option is chosen. If you want different behaviors on mobile and desktop, use a media query to do apply data-options="is_hover: false">

The data-options="is_hover: false"> works on the nav element. It does not take effect on the other tag. So having both is not an out of box option.

Mark Haller almost 4 years ago

I can see on the current Zurb Foundation website that the topbar links work as I want them to but I don't know how to do it!

I want:

On desktop, hover on top item shows dropdown menu. Click on top item goes to link.

On touch, touch on top item shows dropdown menu. Touch again on top item goes to link.

How is this being done on the current site? I can't figure out the code :-)

Scott Anderson almost 6 years ago

I'm trying to figure out something similar.

I want the top-bar to operate normally on non-touch devices (i.e. Laptop), where it displays the dropdown on hover.

However, on touch devices I want the dropdown to show on-click. And, you have to click the top link again to go to that link. This is the way http://foundation.zurb.com/ works, but it's not working for my build on touch devices. When I touch a top-bar link, it displays the dropdown for a moment and then takes me to that page, rather than displaying the dropdown and allowing me to choose a link.

Tom about 5 years ago

I have the same problem. That means I want to have it clickable on a touch device and the hover function on a desktop device.

Adding data-options="is_hover: false" is not solving the problem as then the hover function disappears on the desktop device and it is clickable on all devices.

Karl Ward almost 6 years ago

If the topbar dropdown is set to open on hover, what do you want the click to do? It already reverts to click on touch devices ...

Martin almost 6 years ago

Thank you for your answer. I would like to topbar stay open on click. Also I would like to make topbar open on mouse hover, than close on mouse out. I hope its clear.