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!

Launch Presentation

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.

I added some JavaScript to the tab that increments the value of menuToggle each time the tab is clicked.

Here is the code.

var player=GetPlayer();
var menuVal=player.GetVar(“menuToggle“);

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.

On the base slide of the Slide Master, I added a trigger to toggle the value of menu when the variable menuToggle changes.  If you’ve been paying attention you already know that the JavaScript on the custom tab causes menuToggle to change every time someone clicks the tab.

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.