jQuery

【jQuery】アニメーション付きのシンプルなサークルメニューCircleMenu

December 2, 2017
CIRCLE MENU

CircleMenuはアニメーション付きのシンプルなサークルメニュー。

HTML

<div id="my-circle-menu" class="cm-container">
  <ul class="cm-items">
  </ul>
  <div class="cm-selected-container">
    <div class="cm-selected-label">
      <span></span>
    </div>
    <a class="cm-button cm-button-prev" type="button" title="Previous"><i class="fa fa-chevron-left"></i></a>
    <a class="cm-button cm-button-next" type="button" title="Next"><i class="fa fa-chevron-right"></i></a>
  </div>
</div>

How to use :

var DATA_ARRAY = [{label: 'Menu 0', url: 'menu-0'}];
var MycircleMenu = new CircleMenu($('#my-circle-menu'), DATA_ARRAY, 'menu-0', {key: 'url'}, CALLBACKS);

Callbacks :

var CALLBACKS = {
  onInit: function() {
    console.log('INIT');
  },
  onChangeBegin: function() {
    console.log('CHANGE');
  },
  onChangeComplete: function(d) {
    console.log('CHANGE_COMPLETE')
    console.log(d)
  },
  onLoadPageComplete: function() {
    console.log('PAGE LOADED');
  }
}

MIT