jQuery Plugin For Circular Popup Menu - Circle.js

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.