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.

Circular Menu with Animation Effect

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.

Circular Webstyle Menu

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

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.

130 Comments
Jeffrey Riley
Holly Castellow
Harold Lentink

Hello, fellow community users. I've been trying to build a course with some kind of cirular-menu navigation. But I have some difficulties. Could somebody tell me how to resolve something. Once the menu on the left is opened and closed (and the timeline ends). I cannot re-open the menu. But I want it to be available at all times. Example is in link underneath. https://cloud.scorm.com/sandbox/content/courses/24RFJ0ZSHR/test_course14442eba-c67c-4c9a-b911-34ecf949101f/0/index_lms_html5.html Story file can be found via: https://drive.google.com/file/d/1wcuDhsKmJ6k2ZljJopNDPTcIIlMAatt3/view?usp=sharing I hope somebody can give me some insights here. I know this might not be the exact right place, but at least here people are dealing with the same subject. Kind regards, Harol... Expand