WCircleMenu

What is WCircleMenu?

WCircleMenu is a jQuery plugin to create circle menu like Path app. WCircleMenu use javascript to calculate transition and animation of elements. It doesn't use CSS easing function.

How To Use

Download and include javascript file in your page. Create the menu using div elements, example :

 <div id="my-menu" class="" style="border-radius: 50%;position: relative; width: 50px; height: 50px; background-color: #999;margin:200px auto;">
    <div class="wcircle-icon">
        <div style="padding: 15px;width: 20px;height: 20px;text-align: center;">
            +
        </div>
    </div>
    <div class="wcircle-menu" style="display:none;">
        <div class="wcircle-menu-item" style="background-color:red;border-radius:50%;padding:15px;width:20px;height:20px;">
            A
        </div>
        <div class="wcircle-menu-item" style="background-color:green;border-radius:50%;padding:15px;width:20px;height:20px;">
            B
        </div>
        <div class="wcircle-menu-item" style="background-color:blue;border-radius:50%;padding:15px;width:20px;height:20px;">
            C
        </div>
        <div class="wcircle-menu-item" style="background-color:yellow;border-radius:50%;padding:15px;width:20px;height:20px;">
            D
        </div>
    </div>
</div>

wcircle-icon class is your menu icon. wcircle-menu class is your menu list. You can replace divs inside these icon and menu div elements with links or images.

Call WCircleMenu on your menu :

$('#my-menu').WCircleMenu();

Options

WCircleMenu is customizable with following options

$('#menu_icon').WCircleMenu({
  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,
});

Triggers

Open menu

$('#menu_icon').WCircleMenu('open');

Close menu

$('#menu_icon').WCircleMenu('close');

Example

<div id="menu_icon" class="" style="border-radius: 50%;position: relative; width: 50px; height: 50px; background-color: #999;margin:200px auto;">
  <div class="wcircle-icon">
    <div style="padding: 15px;width: 20px;height: 20px;text-align: center;">
      +
    </div>
  </div>
  <div class="wcircle-menu" style="display:none;">
    <div class="wcircle-menu-item" style="background-color:red;border-radius:50%;padding:15px;width:20px;height:20px;">
      A
    </div>
    <div class="wcircle-menu-item" style="background-color:green;border-radius:50%;padding:15px;width:20px;height:20px;">
      B
    </div>
    <div class="wcircle-menu-item" style="background-color:blue;border-radius:50%;padding:15px;width:20px;height:20px;">
      C
    </div>
    <div class="wcircle-menu-item" style="background-color:yellow;border-radius:50%;padding:15px;width:20px;height:20px;">
      D
    </div>
    <div class="wcircle-menu-item" style="background-color:cyan;border-radius:50%;padding:15px;width:20px;height:20px;">
      E
    </div>
    <div class="wcircle-menu-item" style="background-color:magenta;border-radius:50%;padding:15px;width:20px;height:20px;">
      F
    </div>
    <div class="wcircle-menu-item" style="background-color:khaki;border-radius:50%;padding:15px;width:20px;height:20px;">
      G
    </div>
    <div class="wcircle-menu-item" style="background-color:gold;border-radius:50%;padding:15px;width:20px;height:20px;">
      H
    </div>
  </div>
</div>
<button id="openWCM">open</button>
<button id="closeWCM">close</button>

$('#menu_icon').WCircleMenu({
  width: '50px',
  height: '50px',
  angle_start : 0,//-Math.PI/2,
  delay: 50,
  distance: 100,
  angle_interval: Math.PI/4,
  easingFuncShow:"easeOutBack",
  easingFuncHide:"easeInBack",
  step:35,
  itemRotation:360,
});

$('.icons').on('click',function(){
  console.log($(this).text());
});

$('#openWCM').on('click',function(){
  $('#menu_icon').WCircleMenu('open');
});

$('#closeWCM').on('click',function(){
  $('#menu_icon').WCircleMenu('close');
});

License

MIT License