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

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

Taylor Tomanio

3 years ago01/24/18 at 12:23 pm (UTC)

Here is my contribution to the challenge! Everyone has had such motivating examples!! https://360.articulate.com/review/content/daf67ff5-5633-408a-a4ba-de9fe7aa6a3f/review

Jeffrey Riley

3 years ago01/24/18 at 11:25 pm (UTC)

So many great examples and you are all so FAST! This is my example built around (no pun intended) a graphic I found on Freepik.com. I adapted the parts of the graphic to this challenge. This is the example http://jeffrfiles.s3.amazonaws.com/ArticulatePosts/ELH%20Challenge%20189/story.html and this is the file that could be a template http://jeffrfiles.s3.amazonaws.com/ArticulatePosts/ELH%20Challenge%20189/ELH%20189_JRiley.story.

almost 3 years ago01/26/18 at 2:31 pm (UTC)

I updated this entry to include animation rather than a state change to be more in tune with the challenge.

Linda Lorenzetti
Hero

3 years ago01/25/18 at 2:57 am (UTC)

This was a challenge that our local Storyline Users Group did to mimic a phone U.I. interface: http://www.e-adventurer.com/challenges/CircleMenu/story_html5.html

3 years ago01/25/18 at 12:55 pm (UTC)

I just tried this on the phone. It fits well on the screen and was easy to use. Thanks to your group.

3 years ago01/25/18 at 2:08 pm (UTC)

Glad you like it Jeffrey, the U.I. example was given to the group, the solution was my own.

Darren Wall

3 years ago01/25/18 at 10:07 am (UTC)

Here's my submission! https://s3.amazonaws.com/darrenpubliccontent/ELH+%23189/story_html5.html

safir salam

3 years ago01/25/18 at 11:07 am (UTC)

Good idea ,Thank you

Charles Zoffuto

3 years ago01/25/18 at 3:20 pm (UTC)

How about a little MAGIC this close to the weekend? Hat Trick Magic Show (with sound) http://zoffuto94.s3.amazonaws.com/Magic%20Hat%20Trick%20-%20Storyline%20output/story.html

Vanda H.
Charles Zoffuto

almost 3 years ago02/02/18 at 2:59 pm (UTC)

Haha I love the idea! :D very creativ

Sean Hickey

3 years ago01/25/18 at 9:29 pm (UTC)

Hi everyone! Here's my example. https://360.articulate.com/review/content/6bb54e09-abbc-41fa-8e4b-41f0eb9ed2c2/review I added a couple slides so that some of the menu items (like "Home" and "Downloads") actually work...

erica brooks

almost 3 years ago01/26/18 at 3:26 pm (UTC)

Hi Everyone! Haven't participated in many challenges. Trying to change that this year. Here is my example: https://s3.us-east-2.amazonaws.com/elearningchallenges/189/story_html5.html

almost 3 years ago01/26/18 at 4:01 pm (UTC)

Erica, I can't get your project to load. The icon just spins but nothing appears.

almost 3 years ago01/26/18 at 4:49 pm (UTC)

Thanks Jeffrey for letting me know. Not sure what's going on, working on it now

almost 3 years ago02/11/18 at 12:42 pm (UTC)

Hi Erica - If you'd like to send me your published files, I'd be happy to upload them to our server. Please let me know!

Holly Castellow

almost 3 years ago01/28/18 at 8:11 pm (UTC)

Hi everyone! I went into this thinking I would do something Super Bowl themed but decided to build something around the upcoming Puppy Bowl that takes place before the big game! :) Because, well, puppies are just more adorable. All of the images but one came from Unsplash and Pixabay. Puppy Bowl Fact # 4 reveals a photo I took of my dog, PJ. Not so much a puppy in that photo but the photo is perfect for the theme so I decided to include it. https://360.articulate.com/review/content/23d1cab1-f707-4201-9d74-6d97342c1347/review

almost 3 years ago02/07/18 at 7:08 pm (UTC)

Really great, and of course, adorable!

almost 3 years ago02/11/18 at 12:42 pm (UTC)

Cool idea to theme your course menu around dog paws! I've updated the recap to feature your example: https://community.articulate.com/articles/animated-radial-menu-navigation-elearning#HollyCastellow

almost 3 years ago02/11/18 at 11:38 pm (UTC)

That’s great! Thank you, David. This made my day. ☺ Regards, Holly Holly Castellow (804) 815-6857 hcastellow@yahoo.com

Stephanie Harnett
Hero

almost 3 years ago01/29/18 at 11:13 pm (UTC)

Here is an example - https://community.articulate.com/discussions/building-better-courses/what-happens-when-you-combine-3-weekly-challenges-into-one

David Anderson
Author

almost 3 years ago02/11/18 at 12:43 pm (UTC)

Hi everyone! Just a quick note to let you know the recap for this week's challenge is current: https://community.articulate.com/articles/animated-radial-menu-navigation-elearning/ This was one of our biggest challenges with more than 30 examples in the first week. Thanks again to everyone who shared an example, download, or feedback this week!

Claudine Caro

almost 3 years ago02/27/18 at 2:50 am (UTC)

In my example, I use a hiding menu to change the background image. I included variables to change the background image states. My biggest challenge was using two layers on the master slide to animate the menu open and menu close. Demo: https://360.articulate.com/review/content/fc7fec3b-ead2-48da-b4eb-fc36a12e558a/review

Harold Lentink

almost 3 years ago03/05/18 at 11:31 am (UTC)

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

almost 3 years ago03/05/18 at 11:34 am (UTC)

Hi Harold I cannot download the file, if you are trying to animate and animate out the menu, then you need to make sure you close the layer at the end of the timeline also ensure your timeline is only short if that doesnt help perhaps you can post a link to the file.

almost 3 years ago03/06/18 at 10:46 am (UTC)

Phil, I thought that I could share it with my Google account so you could download, But apparently not. Is there another way for me to upload a file to the forum? I tried to change the setting on my google drive a bit https://drive.google.com/open?id=1wcuDhsKmJ6k2ZljJopNDPTcIIlMAatt3

almost 3 years ago03/09/18 at 9:28 am (UTC)

Phil, Would you mind giving it another try?

Jackie Van Nice
Hero

almost 3 years ago04/22/18 at 8:35 pm (UTC)

Woo-hoo! I finally get to jump in on this one. So many creative menus here! My circular menu navigation helpfully leads to food menu navigation. Here's the demo: http://www.jackievannice.com/challenge_189_circular_menu/story.html Here's the blog post: http://www.jackievannice.com/?p=175072902

joanne k
Jackie Van Nice

almost 3 years ago04/23/18 at 4:00 pm (UTC)

I love it, Jackie. Very clean and yummy looking.

almost 3 years ago04/23/18 at 4:08 pm (UTC)

Thank you, Joanne!

joanne k

almost 3 years ago04/23/18 at 3:51 pm (UTC)

This is my first Challenge, and I was relatively new to both web development and S2. Have mercy please! https://tdaeducationonline.articulate-online.com/1071802283

almost 3 years ago04/23/18 at 3:54 pm (UTC)

Excellent work! Thank you for sharing. :)

almost 3 years ago04/23/18 at 4:11 pm (UTC)

Welcome to the challenges, Joanne! Very cute interaction, plus you even added some sound! Nicely done. :)

almost 3 years ago04/23/18 at 5:25 pm (UTC)

No mercy needed, Joanne. A nice interaction. Love the use of dinner plates as buttons.

Chris Undery

over 2 years ago05/10/18 at 10:25 pm (UTC)

4 months late but adding it anyway. Circular menu based on a competency set using a dial that opens up further menus for each competency set and access to relevant resources. Designed to replace a set of intranet pages with one simple interactive graphic. https://community.articulate.com/download/storyline-3-change-wheel

over 2 years ago05/11/18 at 12:14 pm (UTC)

That's a really clean looking interaction, Chris and a good way to put a lot of information in a small space. My only suggestion would be to include some instructions because it took me a minute to realize I had to move the pointer.

over 2 years ago06/07/18 at 6:33 pm (UTC)

Nicely don Chris. Good example with many uses and I liked the use of the dial for selecting. As Linda said, not everyone is used to use the dial. I can see many uses for this layout.

Dave LeFevre

over 2 years ago06/07/18 at 4:11 pm (UTC)

Way late to this game but I wanted to try this particular kind of menu for an upcoming project so here it is. Already have some refinements in mind but I'll save those for the 'real thing' I'm working on next. https://360.articulate.com/review/content/3e2c1fac-b837-4f92-a5e0-5eb80fd56005/review. Happy to share source with anyone who is interested.

over 2 years ago06/07/18 at 5:07 pm (UTC)

Nice navigation Dave. Very clean look and feel to the slide.

over 2 years ago06/07/18 at 6:07 pm (UTC)

Thanks, Linda. Fun to play with this concept.

Cecile Caswell

over 2 years ago09/08/18 at 8:07 am (UTC)

Hi Everyone! This is my first eLearning challenge. Let me know what you think :) Click here: https://360.articulate.com/review/content/749ebe09-44f0-4cab-a003-2b5a09effc2a/review Thanks

over 2 years ago09/08/18 at 9:05 pm (UTC)

Welcome to the challenges, Cecile! Thanks so much for sharing this week! I've updated the recap to feature your circular menu example: https://community.articulate.com/articles/animated-radial-menu-navigation-elearning#CecileCaswell

Robin Weggeman

over 2 years ago09/19/18 at 12:45 pm (UTC)

https://robinweggeman.articulate-online.com/p/3762066620/story_html5.html?Cust=37620&DocumentID=3c978ecb-1a4f-4387-9878-48174a06765b&Popped=True&v=1&InitialPage=story.html Better late than never. Press RMB to activate

Kimberly Leigh

2 years ago10/29/18 at 2:54 pm (UTC)

I created this challenge for a recent work project, and wanted to post it for an elearning challenge. https://s3.us-east-2.amazonaws.com/kimsportfolio/189+eLearning+challenge+Slider+Menu+-+Storyline+output/story.html

Kimberly Leigh

2 years ago11/09/18 at 5:27 pm (UTC)

Circular navigation: https://s3.us-east-2.amazonaws.com/kimsportfolio/189+eLearning+challenge+Slider+Menu+-+Storyline+output/story_html5.html?lms=1

Chris Dale

12 months ago02/15/20 at 7:05 pm (UTC)

Just come across these, so here's my first crack at a challenge. Some great ideas from you guys, loved some of your examples. https://360.articulate.com/review/content/dc52aacc-18ff-487b-9b60-756c7c36ad5c/review

Circular Menu Navigation in E-Learning #189

Circular Menu with Animation Effect

Circular Webstyle Menu

Challenge of the Week

Resources

Last Week’s Challenge:

New to the E-Learning Challenges?

Related Content

A Week in Review: January 22, 2018

Using Drop-Down Navigation Menus in E-Learning Design #164

A Week in Review: February 05, 2018

136 Comments