Animated Circular Context Menu Plugin With jQuery - GalMenu.js

Animated Circular Context Menu Plugin With jQuery - GalMenu.js
File Size: 5.34 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.