Drop-down menus are a great way to consolidate navigational elements when slide space is limited. They come in all shapes and sizes and can complement the course’s built-in menu system generated by the authoring tool.
But drop-down menus aren’t just for slide navigation. They’re an excellent addition to any e-learning toolkit because they can be used for:
- Slide navigation: Jump to another layer, slide, or scene using the menu’s sub-navigation links.
- Personalization: Choose from a list of options that personalize the course material for the learner.
- Quizzes: Select the correct choice, item, or phrase from a drop-down list of choices for vocabulary, language, and grammar interactions.
- Resources: Provide learners with slide-specific handouts, documents, job aids, and more.
To help kick off this week’s challenge, take a look at some creative drop-down menu examples course designers have shared in the community.
User Details Drop-Down Menu
Here’s a good example of a drop-down list to help learners personalize their course experience. The list captures basic learner information that can be used to push relative content and examples to specific users.
Here’s another approach for drop-down menu navigation. In this example, learners click-and-drag the menu to reveal navigational options.
Alternatively, the menu could include resources and slide-specific information for learners.
Nested Menu with Animation Effect
This super-cool menu template includes a menu that animates to reveal more nested choices. You can see the example in action here and get a detailed intro on how to build this cool effect in this how-to.
Circular Webstyle Menu
Here’s another variation on the circular pop-up menu style. Hover over the bottom circle to reveal menu navigation choices. This is an elegant example with dozens of practical uses in course design.
Challenge of the Week
This week, your challenge is to share an example of a drop-down, fly-out, or pop-up menu effect in e-learning.
If you’re new to course development, try using the shared source files to help you get started. Don’t worry about how your menu looks as much as creating a functional example.
For those course designers with a little more experience, think about sharing an example that demonstrates creative ways drop-down menus can be used in real-world projects.
As always, please consider sharing your source files. Source files help us all learn to build better e-learning courses.
Here are a few resources to get you started. If you run into any stucks this week, let us know. When you post, please include “Challenge #164” in the subject line to help us quickly find your posts.
- Tutorial: How to Create a Drop-down List Interaction in Articulate Storyline
- Storyline 2: Circular Webstyle Menu
- Storyline 2: Nested Menu with Animation Effect
- Storyline 2: User Details Drop-Down Menu
- Storyline 2: Pull-Down Menu
Last Week’s Challenge:
Before you drop what you’re doing to begin working on this week’s challenge, check out the menu of photo collage examples your fellow course designers shared in last week’s challenge:
Wishing you a great week, E-Learning Heroes!
New to the E-Learning Challenges?
The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.
NOTE: Please don’t use Google Drive or Dropbox to host your projects. Both companies have announced that they’re no longer going to support HTML projects.
You can use our Dropbox file request link to send me your zipped output: https://www.dropbox.com/request/jrqHXAxWwbts234Y4xak. Please include your first and last name and challenge number in the file name: DavidAnderson_122.zip.