Versatile Radial Menu In Pure CSS – radialMenu.css

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>