Context Popup Menu Plugin With jQuery - Popup Menu

Context Popup Menu Plugin With jQuery - Popup Menu
File Size: 33.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The Popup Menu jQuery plugin lets you create and display an animated, customizable context popup menu when you click or hover on a specific trigger element.

Features:

  • Custom positions: top, right, bottom, or left.
  • Custom themes: default, blue, red, green, custom.
  • 4 animations: default, flip, grow, bounce.
  • Dynamic menu items.

How to use it:

1. Download and import the jQuery Popup Menu plugin into the webpage.

<link rel="stylesheet" href="styles/Popup-plugin.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="scripts/Popup-plugin.js"></script>

2. Use either Font Awesome icons or Google Material icons with these links:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

3. Create a trigger element the popup menu will be attached to.

<div id="myPopUp" name="demo" class="popupTheme">
  <i class="fa fa-cog"></i>
</div>

4. Define your menu items.

var myMenu =  '<div>\
      <a href="#"><i id="v-hap" class="material-icons">sentiment_very_satisfied</i></a>\
      <a href="#"><i id="hap" class="material-icons">sentiment_satisfied</i></a>\
      <a href="#"><i id="neut" class="material-icons">sentiment_neutral</i></a>\
      <a href="#"><i id="unhap" class="material-icons">sentiment_dissatisfied</i></a>\
      <a href="#"><i id="v-unhap" class="material-icons">sentiment_very_dissatisfied</i></a>\
    </div>';

5. Enable the popup menu with default settings.

$('[name="demo"]').popup({

  content: myMenu

});

6. Possible options to customize the popup menu.

$('[name="demo"]').popup({

  // Where the popup will show by default- top. 
  // Other options: right, bottom, or left
  position: "top",  

  // Default no style, will revert to default colours. 
  // Other options: blue, red, green, custom
  style: "",  

  // Standard animation by default. 
  // Other options: flip, grow, bounce
  animation: "standard",  

  // Default set to "click".
  // Can also be set to hover
  event: "click", 

  // When true, clicking off the menu closes it. When false, only clicking on the menu closes it.
  hideOnClick: true,  

  // z-index can be set for each menu for layering if necessary
  zIndex: 100,  

});

7. The plugin also provides a function to handle actions when clicking on popup menu icons.

$('[name="demo"]').popup({

  popItemClick: function(){} 

});

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