Touch-enabled Circle Menu Plugin - jQuery circleMenu.js

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.

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.

  • Publication date: 13.11.2018
  • Source