Context Popup Menu Plugin With jQuery - Popup Menu
File Size: | 13.1 KB |
---|---|
Views Total: | 10129 |
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.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",
// Menu Element theme. Defaults to popupTheme, but custom class can be set instead theme: "popupTheme", // 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(){} });
Changelog:
2020-05-21
- Minor changes.
This awesome jQuery plugin is developed by ChrisMuster. For more Advanced Usages, please check the demo page or visit the official website.