Path-like Circle Menu with jQuery and CSS3 Transforms - WCircleMenu

Just another jQuery plugin used to create an animated circle menu with fancy CSS3 powered popup animations as seen on Path.com

See also:

• jQuery Plugin For Path-like Wheel Menu Button - Wheel Menu
• Path Style Round Menu Plugin with jQuery and CSS3 - FerroMenu
• Create A Path-Like Circle Menu with jQuery and CSS3 - Path Buttons
• Customizable Circle Menu Plugin with jQuery
• Simple Configurable Path Menu with jQuery & CSS3 - Pie Menu

How to use it:

1. Include jQuery library and the JQuery WCircleMenu plugin's script at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jQuery.WCircleMenu.js"></script>

2. Create the Html for the circle menu as shown below.

<div id="menu_icon">
  <div class="wcircle-icon">
    <div> + </div>
  </div>
  <div class="wcircle-menu" style="display:none;">
    <div class="wcircle-menu-item"> A </div>
    <div class="wcircle-menu-item"> B </div>
    <div class="wcircle-menu-item"> C </div>
    <div class="wcircle-menu-item"> D </div>
    <div class="wcircle-menu-item"> E </div>
    ...
  </div>
</div>

3. Call the plugin with options to active the circle menu.

$('#menu_icon').WCircleMenu({
width: '50px',
height: '50px',
angle_start : -Math.PI/2,
delay: 50,
distance: 100,
angle_interval: Math.PI/6,
easingFuncShow:"easeOutBack",
easingFuncHide:"easeInBack",
step:15,
openCallback:false,
closeCallback:false,
itemRotation:360,
iconRotation:180,
});

4. Style the circle menu via CSS as you wish.

#menu_icon {
  ...
}

.wcircle-menu {
  ...
}

.wcircle-menu-item {
  ...
}

.wcircle-icon {
  ...
}

Change log:

2014-11-19

• add trigger and fix some bug

---

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