This time I will share jQuery Plugin and tutorial about Radial Popup Menu With jQuery – ggExpandableOptions, hope it will help you in programming stack.
ggExpandableOptions is a small and easy jQuery plugin for creating a radial popup menu that is arranged in a circle around the trigger button when toggled.
How to use it:
1. Include the stylesheet expandableOptions.css in the head of the document.
1 |
<link href="css/expandableOptions.css" rel="stylesheet"> |
2. Include the JavaScript expandableOptions.js after the latest jQuery (slim build is recommended).
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"></script> |
4 |
<script src="js/expandableOptions.js"></script> |
3. Create the radila popup menu and add your own actions & images to menu items as follows:
01 |
<div class="expandableContainer"> |
02 |
<ul id="optionsThreeId" class="expandableOptions"> |
03 |
<li class="option" onclick="alert('option 1 clicked');" title="option 1" option-image="one.png"></li> |
04 |
<li class="option" onclick="alert('option 2 clicked');" title="option 2" option-image="two.png"></li> |
05 |
<li class="option" onclick="alert('option 3 clicked');" title="option 3" option-image="three.png"></li> |
06 |
<li class="option" onclick="alert('option 4 clicked');" title="option 4" option-image="four.png"></li> |
07 |
<li class="option" onclick="alert('option 5 clicked');" title="option 5" option-image="five.png"></li> |
08 |
<li class="option" onclick="alert('option 6 clicked');" title="option 6" option-image="six.png"></li> |
4. Initialize the plugin and specify the path to trigger image & image folder.
01 |
$(document).ready(function () { |
03 |
$(".expandableOptions").ggExpandable({ |
09 |
expandImage: "noname.png" |
Changelog:
2018-09-18
This awesome jQuery plugin is developed by GGaritaJ. For more Advanced Usages, please check the demo page or visit the official website.
