Foundation’s components give you a ton of functionality out of the box, but sometimes you want to customize a user interaction a little bit more. Maybe you want things to feel just a little bit smoother, a little friendlier, or help guide the user a bit more. Menus and tabs are the perfect place to start experimenting with this.

Today we’re going to look at adding a smooth hover-based interaction, first using Foundation’s built-in utilities, and then with jQuery for cases that aren’t handled out of the box.

Multi-level Navigation Using Dropdowns

Menus are built into Foundation, and having a multi-level menu (a so-called ‘mega-menu’) is relatively easy to implement in Foundation using dropdowns.

[See Codepen Example]

This works great for your basic use case where you’re happy navigating through the navigations with clicks, but we often want to expose the sub-navigation on hover. This is such a common pattern with dropdowns that it has been built into Foundation. We simply need to add the data-hover and data-hover-panel attributes:

The data-hover attribute makes the dropdown show up on hover, and the data-hover-pane makes it stay visible while you’re hovering over the content.
[See Codepen Example]

Adding Your Own Hover Interactions - Tabs

Let’s look now at another component - Tabs. Tabs are a powerful design pattern for presenting a lot of information in a relatively small space. The pattern consists of two pieces - a set of tabs, and their associated content panels.

[See Codepen Example]

This basic UI pattern lets you click on different tabs, and the associate panels show up on click. Perfect if you have deep, interactive content that your user is going to interact with. But what if you have more visual content and want them to be able to scan and browse all of it?

Adding A Hover Interaction

To allow a more visual “browsing” of your tabs, we may want to add a hover-based interaction just like we did with our navigation above. Unlike dropdowns, tabs don’t have a hover handler built-in, but luckily jQuery makes it super easy to add one. Simply add an event handler for ‘mouseenter’ on each of your tab links that then clicks on those links!

Voila! Hovering over your tabs now behaves just the same as clicking on them. As an added bonus, since we didn’t mess with any of the click behavior (we just piggy-backed on top of it), mobile devices that don’t have a hover interaction will still work just as they always have.

Congratulations! You’ve just upped the ante on your interaction design, and added a new tool to your toolchest for making your user experience smooth like butter. Check out the final demo: http://codepen.io/kball/full/vXVEYZ/

---