Follow us

Simple drop downs menus in Reflow

By Chris on February 19, 2014 in Tips and Tricks
8

We recently added states to Reflow. Here is a simple way to use them to create a drop down widget. Remember I’m a developer first, so I use really bright colors for illustrations unless I can appropriate something more awesome from Seth.

Step 1

Insert a box, make it the size you want in the non-dropped down state, and set it to position: relative. The user won’t see this box. It saves us space in the page flow to absolutely position our drop down. However you want to make sure this box is the size of your undisclosed drop down so nothing accidentally gets hidden until the drop down is fired.

step1

Step 2

Insert a child box into the box from step 1. Set that child to position: absolute and then position and size the box over the parent and as tall as the drop down state will be.

Again, no user will see this box either. This is what is going to expand and contract when the user hovers over it. By expanding  Later we’ll shrink it down to the uncovered state but for now make it as big as you think you’ll need for all your items.

step2

Step 3

Fill up that drop down area with boxes or whatever else you want to get disclosed. The blue area above will always be seen and everything else will get disclosed as needed.
Step3

Step 4

Select the parent box and resize it back down to the size of the always seen box. You can use the selector and the button to select the menu container box. Set the ‘overflow’ to ‘hidden’ of the container you just resized. This is how things look in the default state.
step4

Step 5:

Change the state to “hover” and resize the menu container box back to the dropped down size.
step5

Now you are good to go. Go into Reflow’s preview mode and test it out. This will work for showing your design in the browser and in Reflow’s preview mode. Note: this will not work on your touch devices because they can’t tell when your finger is hovering. When you go to production, add a little jQuery to get it to work.

You can also download the project I used to make this and check it out: simple menu.zip

About the Author

ChrisView all posts by Chris >