Touch-enabled Circle Menu Plugin - jQuery circleMenu.js

A jQuery circle menu plugin that arranges your menu items along an SVG circle and allows the visitor to rotate through menu items with mouse drag and touch swipe.

How to use it:

1. To get started, include jQuery library and the jQuery circle menu plugin's files on the html page.

<link href="css/jquery.circlemenu.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jquery.circlemenu.min.js"></script>

2. Code the HTML for the circle menu.

<div class="wheel">
  <div class="wheel__list">
    <div class="wheel__list__item">
      <span>Item 1</span></div>
    <div class="wheel__list__item">
      <span>Item 2</span></div>
    <div class="wheel__list__item">
      <span>Item 3</span></div>
    <div class="wheel__list__item">
      <span>Item 4</span></div>
    <div class="wheel__list__item">
      <span>Item 5</span></div>
    <div class="wheel__list__item">
      <span>Item 6</span></div>
  </div>
</div>

3. Call the plugin on the top container and done.

$('.wheel').circleMenu();

4. Enable/disable the drag & touch events. Default: false.

$('.wheel').circleMenu({
  dragMouse: true,
  dragTouch: true,
  dragDirection: 'horizontal', // or vertical
});

5. Lock the menu position when rotating. Default: false.

$('.wheel').circleMenu({
  lockDirection: true
});

6. Set the rotation angle on init.

$('.wheel').circleMenu({
  defaultRotation: 0
});

7. Determine whether to animate line from 0 to focused child element. Default: false.

$('.wheel').circleMenu({
  drawLine: true
});

8. Determine whether to rotate to highlight currently focus item. Default: false.

$('.wheel').circleMenu({
  focusRotate: true
});

9. Rotate clockwise or couter-clockwise when dragging down or right.

$('.wheel').circleMenu({
  rotateDirection: 'clockwise'
});

Changelog:

2019-01-01

• rotate direction option

---

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