<%= @page_title %>

In Foundation 4, we wanted to rid our codebase of many different dropdowns within various UI elements. So we created a universal dropdown plugin that will attach dropdowns or popovers next to anything!

Build With Predefined HTML Classes

To create the dropdown you'll need to attach a data-dropdown="your-id" to whatever element you want the dropdown attached to. From there you'll create a list that holds the links or content and add an id="your-id" that associates with the element it belongs to. To style the dropdown, we've included a class of .f-dropdown that you can target and style to your hearts desire. If you want the dropdown to be content, simply chain the class .content to the dropdown. Here's an example of that markup:

<%= code_example ' Has Dropdown Has Content Dropdown ', :html %>

Has Dropdown | Has Content Dropdown

You'll notice that data-dropdown="drop1" and id="drop1" have the same value. This is what tells the dropdown plugin where to look to find the position to attach the dropdown.

Available class options:

tiny: Make the dropdown have a max-width of 200px
small: Make the dropdown have a max-width of 300px
medium: Make the dropdown have a max-width of 500px
large: Make the dropdown have a max-width of 800px
content: Add padding inside the dropdown for better looking content.

You may chain one class from each group to build up desired default styles. For these styles to take effect, make sure you have the default Foundation CSS package or that you've selected dropdowns from a custom package. These should be linked up following our default HTML page structure.

Build With Our Mixins

We've included SCSS mixins used to style dropdowns. To use the mixin, you'll need to have the extension installed or grab _foundation-global.scss, _global.scss and _dropdown.scss from Github and throw them into a foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

<%= code_example ' @import "foundation/foundation-global", "foundation/components/global", "foundation/components/dropdown"; ', :css %>

If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:

<%= code_example ' Has Dropdown ', :html %>

The Container Mixin

There are two mixin you can use when building your dropdowns, the container and the list style. The container mixin will give you all the styles needed for the base styles of the dropdown, not including styles for the default link list style. The container mixin looks like this:

<%= code_example ' /* Container mixin and its options */ .your-class-name { @include dropdown-container($content, $triangle, $max-width); } /* This can be set to "list" or "content" depending on what you want inside. */ $content: list /* If you do not want to attach the triangle pop, set this to false. */ $triangle: true /* By default, the dropdown is 200px max-width, taking on 100% when gets smaller than that. */ /* You can set this to any number you want or change it globally with the variable. */ $max-width: $f-dropdown-max-width ', :css %>

The List Style Mixin

For content dropdowns, we don't add any extra style to the inside of the dropdown other than padding around the edges. For link lists, we wanted to predefined style that would look good out of the box and match the style of our custom select dropdowns. The style mixin looks like this:

<%= code_example ' /* The style mixin - It has no options other than variables to make global changes */ .your-class-name { @include dropdown-container($content, $triangle, $max-width); li { @include dropdown-style; } } ', :css %>

Default SCSS Variables

<%= code_example ' /* We use these to controls height and width styles. */ $f-dropdown-max-width: 200px; $f-dropdown-height: auto; $f-dropdown-max-height: none; $f-dropdown-margin-top: 2px; /* We use this to control the background color */ $f-dropdown-bg: #fff; /* We use this to set the border styles for dropdowns. */ $f-dropdown-border-style: solid; $f-dropdown-border-width: 1px; $f-dropdown-border-color: darken(#fff, 20%); /* We use these to style the triangle pip. */ $f-dropdown-triangle-size: 6px; $f-dropdown-triangle-color: #fff; $f-dropdown-triangle-side-offset: 10px; /* We use these to control styles for the list elements. */ $f-dropdown-list-style: none; $f-dropdown-font-color: #555; $f-dropdown-font-size: emCalc(14px); $f-dropdown-list-padding: emCalc(5px) emCalc(10px); $f-dropdown-line-height: emCalc(18px); $f-dropdown-list-hover-bg: #eeeeee;', :css %>

Note: emCalc(); is a function we wrote to convert px to em. It is included in _foundation-global.scss.

Using the JavaScript

You'll need to include foundation.joyride.js to get plugin to work. You'll also need to make sure to include zepto.js and foundation.js above the alert plugin. Above your closing </body> tag include the following line of code and make sure you have the JS in your directory.

Read how to install Foundation JavaScript

Required Foundation Library: foundation.dropdown.js

Optional JavaScript Configuration

Dropdown options can only be passed in during initialization at this time.

<%= code_example " { // specify the class used for active dropdowns activeClass: 'open' }", :js %>

<%= render "_sidebar-components.html.erb" %>