Minimal Circular Menu In jQuery - roundMenu

File Size: 4.45 KB
Views Total: 1460
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Circular Menu In jQuery - roundMenu

roundMenu is a lightweight jQuery circular (arc) menu plugin that positions menu items on an arc of a certain curvature.

Supports both horizontal and vertical layouts. Works with the unordered HTML list.

How to use it:

1. Create an unordered list for your site nav.

<ul class="demo">
  <li><a href="#">First Item</a></li>
  <li><a href="#">Second Item</a></li>
  <li><a href="#">Third Item</a></li>
  <li><a href="#">Fourth Item</a></li>
  <li><a href="#">Fifth Item</a></li>
  ...
</ul>

2. Place the JavaScript file jquery.roundMenu.js after jQuery.

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="jquery.roundMenu.js"></script>

3. Attach the function to the menu list and done.

$(function(){
  $("ul.demo").roundMenu();
});

4. Set the direction of the arc menu. Default: 'vertical'.

$("ul.demo").roundMenu({
  position: "horizontal"
});

5. Specify the radius (in pixels) used for the arc menu. Default: '3000'

$("ul.demo").roundMenu({
  radius: 5000
});

6. Customize the angle correction factor. Default: '4'

$("ul.demo").roundMenu({
  angleCorrection: 10
});

This awesome jQuery plugin is developed by antoniopuero. For more Advanced Usages, please check the demo page or visit the official website.