Using Circle Menu Navigation in E-Learning #406

Using Circle Menus in E-Learning #406: Challenge | Recap

Circular menus are a great option when you want to provide users with an intuitive and stylish way to present navigation options in a compact format or when screen space is limited.

By using a circular layout, designers can present a large number of options in a compact space without cluttering the screen. This makes circle menus an ideal choice for apps (or e-learning courses) with a lot of features or options that need to be easily accessible to users. Let’s explore a few examples.

Circle Menu Navigation

In this example from Dave LeFevre, learners click the menu button to reveal the circular arrangement of menu options.

View the example | Download the source

Circle Menu with Masking Effect

In this example from Montse, a folder graphic is used as the starting point for the menu options. I like how the folder graphic was layered to mask the animated menu items.

View the example | Download the source file

Circle Menu

In this example, Jackie’s circle menu features menu items nested under the starting button. In addition, I like how the menu features a selected state that remains persistent even after the menu is closed. That’s a nice touch.

View the example | Learn more about this project

Challenge of the Week

This week, your challenge is to create a circle menu example to show how they can be used in e-learning courses. Your example can be static or animated. In most cases, animated menus will require variables. If you need help or get stuck this week, jump into the forums and let us know.

Related Challenge

For more ideas of what's possible, check out challenge #189 and the recap post.

Share Your E-Learning Work

• Comments: Use the comments section below to link your published example and blog post.
• Forums: Start a new thread and share a link to your published example.
• Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure.
• Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness.

Last Week’s Challenge:

While you’re looking over this week’s challenge menu, take a few moments to check out the interactive audio examples your fellow community members shared over the past week:

Interactive Audio in E-Learning RECAP #405: Challenge | Recap

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.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. 

Next Week’s Challenge

Next week's challenge (3/4/23): New Feature Challenge: Microlearning in Rise 360.

With the new microlearning feature in Rise 360, you can create bite-sized, single-objective training easier than ever. See this user guide article for more on this new feature.

Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback:  https://bit.ly/ElearningChallengeForm.