Radial Popup Menu ggExpandableOptions - Download Radial Popup Menu With jQuery - ggExpandableOptions

Download Radial Popup Menu With jQuery – ggExpandableOptions

Posted on

This time I will share jQuery Plugin and tutorial about Radial Popup Menu With jQuery – ggExpandableOptions, hope it will help you in programming stack.

Radial Popup Menu ggExpandableOptions - Download Radial Popup Menu With jQuery - ggExpandableOptions
File Size: 40.7 KB
Views Total: 3650
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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>
09   </ul>
10 </div>

4. Initialize the plugin and specify the path to trigger image & image folder.

01 $(document).ready(function () {
02  
03   $(".expandableOptions").ggExpandable({
04  
05     // default: "./"
06     imagesPath: "./img/",
07  
08     // default: ""
09     expandImage: "noname.png"
10   });
11  
12 });

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.

source : jquery.net