Touch-enabled Circle Menu Plugin - jQuery circleMenu.js

Touch-enabled Circle Menu Plugin - jQuery circleMenu.js
File Size: 9.53 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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
});

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

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

6. Set the rotation angle on init.

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

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