How to make use of 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 newest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="path/to/js/jquery.circle.js"></script>

3. Call the operate on the highest container to generate a default circular menu.

$(function(){
  $("#circle").circle();
});

4. Customize circular menu by overriding the default choices as proven under.

$("#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
  
});

jQuery Plugin For Circular Popup Menu, Circle Plugin/Github, circular menu css, radial menu plugin jquery circlemenu

See Demo And Download