jQuery Plugin For Circular Popup Menu - Circle.js
File Size: | 19.2 KB |
---|---|
Views Total: | 1600 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Circle.js is a jQuery circular menu plugin that arranges and displays menu items in a circle view instead of the normal horizontal bar.
How to use it:
1. Add links to the circular menu as follows:
<div id="circle"> <a class="main"><img src="toggle-button.png" /></a> <a class="menu" href="#"><img src="menu-1.png" /></a> <a class="menu" href="#"><img src="menu-2.png" /></a> <a class="menu" href="#"><img src="menu-3.png" /></a> <a class="menu" href="#"><img src="menu-4.png" /></a> <a class="menu" href="#"><img src="menu-5.png" /></a> <a class="menu" href="#"><img src="menu-6.png" /></a> <a class="menu" href="#"><img src="menu-7.png" /></a> <a class="menu" href="#"><img src="menu-8.png" /></a> </div>
2. Load the Circle.js plugin after the latest jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="path/to/js/jquery.circle.js"></script>
3. Call the function on the top container to generate a default circular menu.
$(function(){ $("#circle").circle(); });
4. Customize circular menu by overriding the default options as shown below.
$("#circle").circle({ // the size of the toggle button main : { width : 64 }, // initial position dip : -15, // border radius radius : 50, // requires 3rd easing library like jQuery easing easing : "linear", // duration in ms duration : 100, // 360 = full circle range : 360, // open/close functions open : function() {}, close : function() {}, // 'panel' = vertical bar animate : "circle", // z-index property zIndex : 0, // delay i ms delay : 0, // smooth corner corner : true, // 1 or -1 direct : 1, // cursor style cursor : "pointer", // revese the animation reveser : true });
This awesome jQuery plugin is developed by gpgkd906. For more Advanced Usages, please check the demo page or visit the official website.