O'Reilly logo

Getting Started with Zurb Foundation 4 by Andrew D. Patterson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Dropdown

Need a simple pop up that shows just below a target link? Foundation calls this a dropdown. It was intended initially as a simple drop-down list, but it now supports any content. Unlike the tooltip, which pops up when you hover over an element, with dropdown, you must click on the element to see the pop up.

The setup is straightforward. You have an item you want to attach a dropdown to, and you have the drop-down content. Put the item you want to attach a dropdown to in the <a> tag with a data-dropdown attribute and assign a value to it (an identifier). Build your content with an ID that is identical to the value of the data-dropdown attribute, give it the f-dropdown class, and add the data-dropdown-content attribute. The item you want ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required