Creating A Drop Down Menu

Creating a Drop Down menu in Storyboard is actually very simple at a core level.
There are a couple of ways to actually implement the specifics, but simply put a Drop Down is characterized by content appearing and disappearing when a button is pressed.

That is a very simple operation for Storyboard to do.

So the other side of the design is that it is a menu that appears. 

This means that there needs to be:

• Multiple selectable options
• They need to have unique behavior when interacted with

There are a couple of ways to approach this, but I find that the simplest way to implement this is to use a Table.

The reason for this is that Tables make it easier by design to implement menu behavior.
Each table cell will act as a menu option, and you can determine which specific cell has been interacted with easily.

If we just take a look at this simple example application, we can see a menu button in the top left.

A gre.press event has been tied to this button to trigger an animation of a table sliding down from outside of the screen and into position.

Here we can see the menu sliding into position.
Additionally, a reverse animation has been created in order to hide the menu by sliding it back out.

Additionally, whenever one of the cells is pressed, it calls a Lua function which simply prints out the text the cell contains:

--- @param gre#context mapargs
function cb_table_press(mapargs)
  print(gre.get_value(string.format('%s.text.%d.1',mapargs.context_control, mapargs.context_row)))
end

Instead of Tables you could also use cloned controls. You can get the same basic results using either Tables or cloned controls, but if you want your Drop Down to have a complex animation, then cloned controls are probably your better bet.

You can read some documentation on cloned controls here:
https://support.cranksoftware.com/hc/en-us/articles/360057413771-gre-clone-object

Still, even with Tables you can get some nice looking animations.
For example, take a look at this demo which is using the same principles as the previous one, but also utilizing each table cell’s X position in order to create a delay effect.


You’ll also notice that because it is a table, enabling scrolling is as easy as a click of a button.