Drop Down Menu Storyline

Jun 19, 2012

Anyone have any tips or suggestions for creating a drop-down menu in Storyline?  I am trying to create my own from scratch but having issues with making the drop down menu funtion properly (i.e, making the menu items appear and disappear as the user mouses over the menu).

153 Replies
Greg Damron

Hi Oswaldo,

Here's an example of a mouse over drop down menu, see if it may helpful for what you are looking for. Using mouse over and the hover states of the multiple menu objects to open/display/close the drop down was a little quirky! The solution I found that got everything appearing and disappearing as needed was to use a transparent shape to create a "hover border" around the drop down menu area when its displayed. Then if the mouse is moved outside the menu choice area without making a selection the hover border triggers closing the drop down. With this in place, a trigger to open the menu and then a trigger to make the selection from the display was the rest of what was needed to make it go. I've attached the story file showing the set up. Hope this of help!

Greg Damron

Hello all,

I've worked on the drop down menu a little more and incorporated Nancy's excellent suggestion of having the the menu item currently selected as highlighted. This first post shows shows the details for inserting the menu system at slide level. My next post in a few minutes will show details for applying the menu it on the master. I've had fun building it, I hope you find it useful and version 2 a nice enhancement.

Project details:

* Hovering over any menu choice drops down that menu layer, then click select to make a choice or move out of the hover area to close the menu

* The use of a transparent shape around the menu area in the drop down creates a "hover border" to hide the drop down layer if the mouse is moved outside the menu area without making a selection
__________

v2 improvement:
To highlight the currently selected top level menu item, a trigger is added to each layer, setting the menu item's state to selected at the start of each layer's timeline.

To keep all the menu items from eventually showing as selected when the user clicks through the menus, all five top level menu items were converted to a button set named menuBar.

Since all five items are now in the button set - only one may be selected at any time and any previously selected item in the set is automatically deselected when each new selection is made -no further triggers or validation is needed

Greg Damron

Here's the update for the master slide version- a little different approach was needed to effect to update the states of the menu items on the master from slide level ...see below (notes are also on the notes tab in the story file). Hope you find the enhancements useful!

Best regards, -Greg

Project details:

* All menu actions are on the master slide

* Hovering over any menu choice drops down that menu layer, then click select to make a choice or move out of the hover area to close the menu

* The use of a transparent shape around the menu area of the drop down creates a "hover border" to hide the drop down layer if the mouse is moved outside the menu area without making a selection
__________

v2 improvement:
To highlight the currently selected top level menu item, two triggers are used on each layer as it loads, the first trigger changes a variable to true set the menu item's state to selected on the master slide. With the menu now selected, the second trigger resets the variable to false for the next use.

Having these two triggers sequentially doing an opposing action seems a little counter intuitive at first, but solves the problem of communicating the state change information from the individual slide level to the master slide nicely (a quick variable change "pulse" of sorts, that takes place as the new slide timeline begins).

To keep all the menu items from eventually showing as selected when the user clicks through the menus, as with the slide level menu demo, all five top level menu items were converted to a button set named menuBar.

Since all five menu items are now in the button set - only one may be selected at any time and any previously selected item in the set is automatically deselected when each new selection is made - no further triggers or validation needed.

Cath P

Hi Greg - I can't seem to get the 'mouse hover over' feature to work - I have set up as per your template - created a transparent shape with trigger to hide layer when mouse hover over  - the shape is sitting behind the drop down buttons /bottom of timeline as per yours but when I preview, the drop down list does not disappear unless I select something from the list or move onto another menu. 

Any advice would be greatly appreciated. 

This discussion is closed. You can start a new discussion or contact Articulate Support.