Create Beautiful Custom Dropdown Menus With jQuery—Captivate Edition

I am sure one day soon Adobe Captivate 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 (tons of layers/triggers). But sometimes it really just makes sense to use a dropdown (select) menu!

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

Generally speaking what I have done is:

• Created two Captivate 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 Captivate 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 Captivate Variable when a selection is made.

Check out these demos.

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

Watch the videos 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

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.