Step by Step - foundation

Button Dropdown

Making a foundation button with a hover dropdown pane with buttons in it
RSD foundation 6.4.1


Class blue
Id yellow
Type pink
Attribute green
Attribute Value orange

The Set Up

We'll use a button bar with 5 buttons for this example
then we'll make one of those a button drop
From Layout ADD a row give it a class of full-width
In DIMENSIONS make the Max-width none
Select the column in the full-width row
Give it a class of menu-column
In DIMENSIONS make all the Padding 0

Adding the button bar

From Content ADD a Container Nav to that column
In Design ADD the Classes button-group
and expanded to it from the drop down
In DIMENSIONS change the width from auto to 100%
Give it an ID of menu-bar
In Elements ADD 5 Button Links

Apply Flex for Desktop

Select the button-group container
With the slider to the left of the first break point
In Design open POSITION you'll see Display Flex
In Direction it has Row change that to Column
Move the slider to the right of the first break point
Change the Direction to Row
You can leave it past the first break point for the next few steps

Adding an drop down arrow to a button

Select the center button in Design
ADD the class dropdown that will place the arrow
If you don't see it grey out the button class
go down to border select the top with no px no style
and select the color white
In ATTRIBUTES ADD data-toggle
For it's value use drop1
If you were doing more you would use drop2 drop3 etc.
That will make it the trigger for the dropdown pane

Adding a dropdown pane

Select the menu-column
From Content ADD another Container Nav to that column
Select it and from Design ADD the class dropdown-pane
That will make it disappear so go to the Inspector
You'll see an eye icon with a slash through it
Click on that so it's just an eye icon to see the container

Adding the drop down pane Attributes

Select the dropdown-pane and give it the ID drop1
That's the value we used for the trigger button
If you were doing more you would use drop2 drop3 etc.
In ATTRIBUTES ADD data-dropdown
Then ADD data-hover with a value true
Then ADD data-hover-pane with a value true

Making the pane the width of the button bar buttons

Still with the dropdown-pane selected
You don't have to do this but to match the width
of the button bar buttons we do a little math

Since we have 5 buttons we divide 100 by 5 for 20%
If you had 4 it'd be 25%, 6 16.6% and so on
Go to DIMENSIONS and make the dropdown-pane width 20%
Remember this is still with the slider past the first break point
This part should be done to fix the space around the button in the container
Slide it to the left of the first break
and change the width to 100%
Make all the padding 0
Leave it to the left of the first break for the rest

Adding the drop down buttons

Select the dropdown-pane
Go to content and add a Button Link
Select that Button Link and from Design
ADD the class button
ADD the class expanded
ADD the class button-drop
Select the button and expanded classes to grey them out
When greyed out we will only apply style to the button-drop class
In DIMENSIONS change the Margin from 1rem down to 0
Then add a 1px margin for top
Now if you go up to Element use the squares icon below Target
and duplicate as many drop down buttons as you need
Slide it back and forth of the break points and you'll see the change

Preview On

Go to inspector and select the dropdown-pane
and click the eye icon so it has a slash through it
Then use Preview on to see it in your browser
You'll see the buttons drop down buttons on hover
If you diminish the window you'll see it stack