While working on a new pet project I ran into an annoying problem with Foundation Zurb 5's top bar dropdown. I couldn't find any solution on the web so I thought I'd share a workaround.
The top bar dropdown is shown and hidden using CSS in a way that prevents the click event propogation. If you want your menu items to do something other than an href, like listening to a click and doing something programmatically, you're out of luck - the event won't fire.
Here's a JSBin with the problem demonstrated:I've added click listeners on the menu items that should open an alert window when clicked. Try clicking on dropdown->link, nothing will happen. This is because the element is hidden before the event can trigger.
I wanted to keep Foundation's hiding CSS because in the comments it is said to support accessibility. I assume there is some learned knowledge sunk into it so I prefer not to touch it directly, but manipulate around it with code.
Therefore I won't call it a solution because it's not elegant enough, but it works and should get you out of the bind if you're in it. I'm using the scss version so I'll describe what I did there. At the bottom of the post I've linked a JSBin with the solution in plain CSS.
Open _top-bar.scss, and find the following snippet:
The @include represents the following CSS:
(plus a display:block)
Move the @include into a new class (give it whatever name you see fit)
Now, in your HTML, add the class to the dropdown. I am using Ember so the following is a Handlebars template:
The unelegant part is that you need to control the dropdown visibility from code. It shouldn't be super dirty; if you listen to clicks on the dropdown and toggle the hiding class it should do most of the trick.
Here's a JSBin with the solution with plain CSS
If you have a nice CSS only solution for this please share in the comments.