Product Design Lessons

Intro to Foundation  |   Lesson #140

Hover Interactions With Menus and Tabs

Learn how to integrate hover into your interaction design with tabs and menus.

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:

Next Steps

That’s all you need to know! If you want to learn more about the components available to you in Foundation, and how you can use them to build an amazing user experience, join us for one of next Introduction to Foundation course!

This lesson is just a taste of the amazing topics you can learn in our University Courses. Check out our next Introduction to Foundation Class. If you're looking to be a Foundation expert, enroll in our Advanced Foundation Class and we'll help you achieve your goals.

About the instructor


Kevin is an engineering lead here at ZURB, and spearheads Foundation development. He’s known for being a JavaScript ninja and getting overly excited about obscure technological details