Spring is here so it’s time for a drop-down menu
Not only do you get to see some pretty pictures from my garden but you also get to see a nifty custom built drop-down menu in Storyline 360. What could be better!
Click on the picture to launch the demo.
How I did it
I started by creating two variables in Storyline: One is a boolean (True/False) variable called menu and the other is a numeric variable called menuToggle.
Next, I turned off all the default tabs in the Storyline player and added my own custom tab called Toggle Menu – ok so that is the easy part.
Here is the code.
That’s all for the custom tab.
Now on to the Slide Master
First I created a layer in the Slide Master that contains the toggle menu (the menu is just some rectangle shapes with hover states and triggers to jump to specific slides when clicked. I added Fly In enter and Fly Out exit animations to each of the topics.
To keep the menu from flying out before the user clicks, I used a Cue Point to pause the timeline until the user clicks one of the topics.
I then added a couple more triggers to the base Slide Master: one trigger to show the menu layer when the variable menu changes if the value of menu is equal to true and another trigger to resume the timeline on the menu layer (remember I paused it using a cue point) when the variable menu changes if the value of menu is false.
Finally, I published and then crossed my fingers that it worked on all the different browsers and devices. (It did test on IE 11, Edge, Chrome and Safari on the iPad and it seems good to go.)
Trackback from your site.