Build a custom design dropdown menu in Storyline to maintain branding consistency with a only a few steps.

Build a custom dropdown menu in Storyline

Build a custom design dropdown menu in Storyline to maintain branding consistency with a only a few steps.

Design Process
 — 
15
 Min read
 — 
September 21, 2022

Storyline’s versatility allows you to develop a custom dropdown menu. If you want to avoid using the built-in Storyline menu function in the player, this short video is for you. 
The custom dropdown menu is developed inside Storyline's ‘Slide Master’. 

Some of its benefits are:

✅ it shows branding consistency in the course

✅ the menu is available for all master slides

✅ the menu is editable in one place

✅ it allows controls of the menu display and content

Check it out here:

Or, try it yourself. Click here to see the demo.


The steps are:
1. Prepare the design in Storyline with content and menu.

✳️ Turn off the built-in ‘Menus & Controls’ in the ‘Player’ settings
✳️ Ensure that you apply the correct 'master slide' to your design

2. Prepare the slides in the ’Slide Master’

Use the first slide to add a 'Menu' layer. This is where you design your menu items.

✳️ Why? This set-up makes it available to all slide master layouts.

In the 2nd slide, add a 'Navigation' layer. This is where you'll place the menu icon.

✳️ Why? It allows you to develop other layouts without a menu.

3. Create a True/False variable

Create a True/False variable to activate the dropdown menu. You can name it however you want. I name mine 'ToggleMenu'.
I set the default value as False.

✳️ Variable naming guide: You want to choose a name that you will quickly understand if you come back to this file a few months later.

4. Add triggers to show and hide the menu using the variable

On the base layer of the first slide in the 'Slide Master', set 2 triggers to show and hide the dropdown menu.

  • Show layer 'Menu' when the variable 'ToggleMenu' is True.
  • Hide layer 'Menu' when the variable 'ToggleMenu' is NOT True.

5. Add triggers on the ‘menu icon’ to change the variable's value

On the 'Menu' icon in the 'Menu' layer, set 2 triggers:

  • Set the variable 'ToggleMenu' to value False when it reaches 3s
  • Pause the timeline on 'this layer' when it reaches 2s

✳️ Why use 'when timeline reaches 3s' instead of 'timeline starts on this layer’? This set-up is useful to avoid clash with the content on the main slides (when there are elements that appear ‘when timeline starts on that slide’).

6. Add triggers to activate the 'navigation' layer

On the base layer of the 2nd slide in the 'Slide Master', set a trigger:

  • Show the 'Navigation' layer' when it time reaches 1s

On the 'Navigation layer', set a trigger:

  • Set the variable 'ToggleMenu' to True when the user click on the menu icon

7. Add triggers on the ‘menu content’

Still in the 'Slide Master', go to the 'Menu layer' in the first slide.

On the close icon, set 2 triggers:

  • Resume timeline on this layer when user click on the Close icon
  • Hide this layer when user click on the Close icon

On every menu item (text links), set 3 triggers:

  • Set the variable 'ToggleMenu' to False when user click on the text link
  • Hide the layer when user click on the text link
  • Jump to its slide when user click on the text link

✳️ Why? Set the variable to False when user click on the text link won't leave an opened menu on the slide.

8. All done! Now you have a custom dropdown menu.

-------

If you would like to watch the step by step tutorial, it's available on Youtube:


Like the article? Spread the word