Animated Circular Context Menu Plugin With jQuery - GalMenu.js

GalMenu.js small and easy jQuery plugin to replace the native browser context menu with an animated circular popup menu where the items are wrapped around a circle when you right click the webpage. It also works on mobile devices and will be triggered when the users long tap the screen.

How to use it:

1. Link to jQuery library and other required resources as follows:

<link rel="stylesheet" href="css/GalMenu.css">
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="js/GalMenu.js"></script>

2. Create the html for the context menu.

<div class="GalMenu GalDropDown">
  <div class="circle" id="gal">
    <div class="ring">
      <a href="#" title="Home" class="menuItem">Home</a>
      <a href="#" title="Blog" class="menuItem">Blog</a>
      <a href="#" title="About" class="menuItem">About</a>
      <a href="#" title="Contact" class="menuItem">Contact</a>
      <a href="#" title="Social" class="menuItem">Social</a>
      <a href="#" title="Other" class="menuItem">other</a></div>
  </div>
</div>

3. Create a fullscreen overlay that will appear when the context menu is opened.

<div id="overlay" style="opacity: 1; cursor: pointer;"></div>

4. Add your own background images to the menu items.

.ring a:nth-of-type(1) { background-image: url("1.jpg"); }

.ring a:nth-of-type(2) { background-image: url("2.jpg"); }

.ring a:nth-of-type(3) { background-image: url("3.jpg"); }

.ring a:nth-of-type(4) { background-image: url("4.jpg"); }

.ring a:nth-of-type(5) { background-image: url("5.jpg"); }

.ring a:nth-of-type(6) { background-image: url("6.jpg"); }

5. Initialize the plugin with default options.

$('body').GalMenu({
  'menu': 'GalDropDown'
})

6. The JavaScript to arrange the menu items along a circle.

for (var i = 0,
  l = items.length; i < l; i++) {
    items[i].style.left = (50 - 35 * Math.cos( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
    items[i].style.top = (50 + 35 * Math.sin( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%"
  }

7. Decide whether to close the context menu when you click on the blank area of the fullscreen overlay.

$('body').GalMenu({
  click_to_close: true
})

8. Make the context menu always stay in the webpage.

$('body').GalMenu({
  stay_open: true
})

Change log:

2016-09-04

• make the menu always be visible in the viewport

---

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