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

File Size: 43.4 KB
Views Total: 9751
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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

See also:

How to use it:

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

<script src="//"></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 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>

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

width: '50px',
height: '50px',
angle_start : -Math.PI/2,
delay: 50,
distance: 100,
angle_interval: Math.PI/6,

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

#menu_icon {

.wcircle-menu {

.wcircle-menu-item {

.wcircle-icon {

Change log:


  • 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.