Launching a dropdown almost anywhere.

The Dropdown stack does not need to just be launched by a button, although that is the easiest way. Right now there is only known issue with using Dropdown, and that is with images. Joe is working on a fix, but it might have to come from Zurb itself.

Dropdown with Text

It is easy to set up a Dropdown stack using a text link. Once you have your Dropdown stack set up, be sure to change the Dropdown ID, probably to something that represents what is in the Dropdown stack. In the example below, I changed it to austin.

Now you need to add your text, drop in a paragraph stack (or any text stack will work) and highlight your text and click the green add a link button. When you do that, a sheet will drop down from the top of Rapidweaver. In the sheet, you need to add two things. The first is the URL. Make this Javascript:void(0). This will ensure the link does not change or reload the page. The next thing is you will have to add a custom attribute to the sheet. To do this, click the circle that has a + symbol in it. Then change the name of the attribute to data-dropdown and add a value of dropdown-id, which is the dropdown ID you set in the Dropdown stack. In the example below, I used the ID of austin.

Then you can click on Set Link to set the link. Now preview your page and look for your text link. Click on it and you should see the Dropdown stack appear below the word. It looks like this:

You can also make the link open on hover, by adding this code to the link settings. Add a new custom attribute to the link, give it a name of data-options and a value of is_hover:true and your link will now open the dropdown on hover.

Dropdown with a Button Stack

This is very easy to do as well. Add a Button stack and a Dropdown stack to your webpage. The Dropdown stack does not have to be right under the button stack, but it is easier to remember what the Dropdown stack is connected to if you do put it there.

As of right now, the Dropdown stack will only work with the standard Foundation Button Stack or the standard Button stack that ships with the Stacks plugin. We are working on updating Sweet Button to work with it as well. Any other button stack by other developers will have to be changed to make it work correctly.

Once the button is on the page, change the Button Type setting from Link to Open Dropdown:

Also be sure to change the Button Dropdown ID so it matches the ID in the Dropdown ID in the Dropdown stack. If you want it to work on hover, there is no need for extra code, the button has a checkbox for hover, check that and you are good to go.

Now go forth and make your websites great!