Using Drop-Down Navigation Menus in E-Learning Design #164

Drop-Down Menus in E-Learning #164: Challenge | Recap

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.

User Details Drop-Down Menu

Click here to view the example | Download | Phil Mayor

Pull-Down Menu

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.

Pull-Down Menu

Click here to view the example | Download | Nejc Žorga Dulmin

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.

Nested Menu with Animation Effect

Click here to view the example | Learn more | Download | Joshua Stoner

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.

Circular Webstyle Menu

Click here to view the example | Download | Phil Mayor

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.

Resources

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.

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:

Animated Characters in E-Learning #163

Character Animation in E-Learning #163: Challenge | Recap

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.

87 Comments
Allison Goldthorpe
Kayla Burtch
Ian Monk