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
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.
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.
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:
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.