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?
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.
| Default | Undesirable Fix | Best | Corrected Positions |
|---|---|---|---|
 |
|
|  |
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
liliane.d@gmail.com Happy to help if (as bobby.pedersen@education.tas.gov.au mentioned) you like the clickable page i created 
Feel free to reach out
- Reference
- Community Guidelines
- Security
- Developers
- Open Source
