A Pure CSS Library for Radial Menus and Lists | radialMenu.css

Radial Menu is a pure CSS library of built-around, flexible, and customizable menus. The radial layout organizes a list of elements in a circle around a central element called the axis.

The radial menus always display items around the axis, while the radial menus use the axis as a clickable toggle to show and hide items.

How to make use of it:

1. To get begun, insert them radialMenu.css into the doc.

<link href="./radialMenu.min.css" rel="stylesheet" />

2. Create a radial list as an alternative. This signifies that the menu objects will all the time show on the web page.

<div class="radial menu">
        <input id="radialMenu" type="checkbox">
        <label class="radialPivot" for="radialMenu">
            <span class='far fa-compass'></span>
            <span class="sronly">Show menu items</span>
        </label>
        <ul class="radialList compass" role="navigation" aria-label="menu items">
            <li class="icon"><a href="javascript:alert(`Go North`)">N</a></li>
            <li class="f1"><a href="javascript:alert(`Go North North East`)">&#183;</a></li>
            <li class="f1"><a href="javascript:alert(`Go North East`)">NE</a></li>
            <li class="f1"><a href="javascript:alert(`Go East North East`)">&#183;</a></li>
            <li class="icon"><a href="javascript:alert(`Go East`)">E</a></li>
            <li class="f1"><a href="javascript:alert(`Go East South East`)">&#183;</a></li>
            <li class="f1"><a href="javascript:alert(`Go South East`)">SE</a></li>
            <li class="f1"><a href="javascript:alert(`Go South South East`)">&#183;</a></li>
            <li class="icon"><a href="javascript:alert(`Go South`)">S</a></li>
            <li class="f1"><a href="javascript:alert(`Go South South hWest`)">&#183;</a></li>
            <li class="f1"><a href="javascript:alert(`Go South West`)">SW</a></li>
            <li class="f1"><a href="javascript:alert(`Go West South West`)">&#183;</a></li>
        </ul>
    </div>

3. Specify the radius of the circle.

<div class="radial menu radius5" title="Click To Open">
  ...
</div>

4. Set the animation speed.

<div class="radial menu speed5" title="Click To Open">
  ...
</div>

5. Set the animation delay.

<div class="radial menu delay5" title="Click To Open">
  ...
</div>

6. Set the menu format you like: 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>

Radial Popup Menu, Versatile Radial Menu In Pure CSS, Radial Menu Plugin/Github

CSS-Library-for-Radial-Menus-and-Lists-Demo


See Demo And Download

Official Website(fvitali): Click Here

This superior jQuery/javascript plugin is developed by fvitali. For extra Advanced Usage, please go to the official website.

Share