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

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.