Create Beautiful Custom Dropdown Menus With jQuery—Storyline Edition

I am sure one day soon Articulate will push an update that empowers us with dropdown (select) menus. But in the meantime, if you are like me you have probably avoided building them—it takes so many layers and triggers. But sometimes it really just makes sense to use a dropdown menu!

I decided to build one using jQuery (JavaScript). Right away you should know that this solution is limited to Storyline’s HTML5 output.

Generally speaking what I have done is:

• Created two Storyline Variables:
  • One holds my list of items
  • The other stores the Learner’s selection
• Then I added a shape to the slide.
• I size and position it where I want my dropdown.
• Then I add a JavaScript trigger to run my code.
• Lastly… I revel in the glory of a dropdown.

How it works; the jQuery:

1. Adds my CSS to the page header (to style the dropdown).
2. Adds a DIV to hold the menu.
3. Adds a SELECT to the div.
4. Grabs the list of values from Storyline and adds each as an OPTION.
5. Looks for my shape (based on its alt-text).
6. Moves the DIV/SELECT to the same position as the shape.
7. Resizes them to about the same size as the shape.
8. Adds a listener to detect when the Learner makes a selection.
9. Updates the Storyline Variable when a selection is made.

Check out the demo:

Grab the sample Storyline file that includes the code and start playing!

Watch the video for more details:

A few notes:

If the slide changes size (player set to “scale to fit”) then the menu will not move with the other stuff. There is a way around this (watch for change and move) but I didn’t need it yet for my project.

The colors, fonts, etc. can be changed by editing the CSS. I mostly used clips from this CodePen to create mine: https://codepen.io/ericrasch/pen/zjDBx

Next week, I'll show you how I achieve this in Adobe Captivate! For more pre-built eLearning goodies, check out the eLearning Brothers Template Library.

James Kingsley has worked in the eLearning Industry for over 16 years. He has won several awards for combining technologies to produce better eLearning. He is an Articulate MVP. James is a Solver of Complex eLearning Puzzles and the Co-Founder of ReviewMyElearning.com. You can follow him on Twitter or connect with him on LinkedIn for additional tips and examples. He pots random musings on JamesKingsley.com.