Author: | fvitali |
---|---|
Views Total: | 1,721 views |
Official Page: | Go to website |
Last Update: | November 2, 2020 |
License: | MIT |
Preview:

Description:
A CSS only radial menu/list library that pops up a list of menu items and arranges them around the trigger element just like a circle or spiral.
How to use it:
1. To get started, insert the radialMenu.css
into the document.
<link href="./radialMenu.min.css" rel="stylesheet" />
2. The basic HTML structure for the radial menu.
<div class="radial menu" title="Click To Open"> <input id="radialMenu" type="checkbox"> <label class="radialPivot" for="radialMenu"> <span class="far fa-compass">Any Trigger Icon Here</span> <span class="sronly">Show menu items</span> </label> <ul class="radialList compass" role="navigation" aria-label="menu items"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> ... </ul> </div>
3. Create a radial list instead. This means that the menu items will always display on the page.
<div class="radial list"> <input id="radialMenu" type="checkbox"> <label class="radialPivot" for="radialMenu"> <span class="far fa-compass">Any Trigger Icon Here</span> </label> <ul class="radialList compass" role="navigation" aria-label="menu items"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> ... </ul> </div>
4. Specify the the radius of the circle. (radius1
to radius10
).
<div class="radial menu radius5" title="Click To Open"> ... </div>
5. Set the animation speed. (speed0
to speed10
).
<div class="radial menu speed5" title="Click To Open"> ... </div>
6. Set the animation delay. (delay0
to delay10
).
<div class="radial menu delay5" title="Click To Open"> ... </div>
7. Set the menu layout you prefer: compass
or clock
.
<ul class="radialList compass" role="navigation" aria-label="menu items"> ... </ul> <ul class="radialList clock" role="navigation" aria-label="menu items"> ... </ul>
8. Determine the position of menu items. (p1
to delay12
for clock
layout, and pN
to pNNW
for compass
layout).
<ul class="radialList compass" role="navigation" aria-label="menu items"> <li class="pE">First</li> <li class="pSW">Second</li> <li class="pNW">Third</li> <li class="pSE">Fourth</li> <li class="pN">Fifth</li> <li class="pS">Sixth</li> <li class="pW">Seventh</li> </ul> <ul class="radialList clock" role="navigation" aria-label="menu items"> <li class="p4">#3</li> <li class="p6">#2</li> <li class="p8">#1</li> </ul>