Circular Menu Navigation in E-Learning #189

Circular Menu Navigation in E-Learning #189: Challenge | Recap

Circular menu navigation is a popular style in mobile apps, where screen real estate is at a premium. Traditional navigation like tree menus and button tabs can quickly clutter smaller screens and reduce the available space for content.

While most course designs are large enough to display full menu navigation, there are some design benefits to collapsing the navigation to create a clean and uncluttered slide. Let’s look at a few examples.

Circular 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 learn more about how it was designed in this how-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 for course designers.

View the example | Download | Phil Mayor

Challenge of the Week

This week your challenge is to create a circular navigation menu that can be used in e-learning courses.

You can choose whether the menu animates in and out of the slide or simply appears and disappears when clicked. If you have time, build out a few extra slides to show how the menu buttons would work in a real project.

Resources

How to Create a Cool Menu Button Nesting Animation Effect with Storyline By Joshua Stoner

Last Week’s Challenge:

To help you get those e-learning gears spinning, check out the creative ways course designers are using random number variables in their e-learning courses:

Random Number Variables in E-Learning #188: Challenge |Recap

Wishing you a perfect circle of a 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.