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.
136 Comments
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