cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

How to create a circular menu?

Guys, I'm trying to create a circular menu similar to the one below in Canvas, but the limitations of HTML are not allowing me. Has anyone tried to do something like this?

293020_Animated-Circle-Menu-with-jQuery-CSS3.jpg

36 Replies
Highlighted

I'll share that with the team. Do you know how that looks on mobile devices?

Highlighted

Hi Rob,

I take the Share URL from Articulate 360 and convert to an iFrame, then I insert the iFrame (HTML mode) on the page. 

Highlighted

Hi Maria,

Have you figured out how to get Articulate into Canvas Pages, not just Assignments?

Highlighted
Community Member

Hi all,

FWIW, Articulate Storyline has a nice template that I've used that does just this.  Can easily be brought into Canvas from Articulate 360

Highlighted

Nice, that's awesome!

Highlighted

Thanks bryanjos@missouri.edu

I like codepen, it allows sharing and a sandbox in one place. For this one, a user can customize it, and copy the relevant CSS into the proper HTML elements and get a copy/paste RCE version without having to upload anything to CSS as I showed above.

Highlighted

Very pretty!  I like the CodePen example!

Highlighted

I was was concerned about the user experience of how a designer might order the positioning of items in orbit and how that might affect the user experience of the end user, a student.

 

DefaultUndesirable FixBestCorrected Positions
Default
  1. Center
  2. A : C
  3. B : D
  4. C : E
  5. D : F
  6. E : G
  7. F : H
  8. G : A the issue
  9. H : B
  1. Center
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
corrected

In most cases, that seems funky to me, in that if the CSS doesn't render or is made responsive, the user would see a list that has no proper order for table of contents.

Trying to keep some basic standards of navigation like:

  • The first item in the list, is typically the starting point.
    • The caveat here is that the center item is the first item in the list.
  • Then, the second item in the list (A) would be next, but it's position is at 3 O'Clock
  • Making the last item in the list at 1:30

Depending on the images or text used this could create confusion.

Therefore, I made some adjustments to the rotation of the orbiting items to get them in the correct position, or at least show an example of what that might look like.

Circular Nav Canvas + Position 

 

Graceful degradation - MDN Web Docs Glossary: Definitions of Web-related terms | MDN 

Highlighted
Community Member

Thank you for your support. I was very happy with everyone's response and I will test them.

Highlighted

liliane.d@gmail.com‌ Happy to help if (as bobby.pedersen@education.tas.gov.au‌ mentioned) you like the clickable page i created Smiley Happy
Feel free to reach out