23
Sep 15

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 Problem

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.

The Workaround

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:

zurb1

 

The @include represents the following CSS:

zurb4

 

(plus a display:block)

Move the @include into a new class (give it whatever name you see fit)

zurb2

Now, in your HTML, add the class to the dropdown. I am using Ember so the following is a Handlebars template:

zurb3

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.

Leave a Reply