Customizable Gooey Menu Plugin With jQuery And SVG Filters gooey js - Download Customizable Gooey Menu Plugin With jQuery And SVG Filters - gooey.js

Download Customizable Gooey Menu Plugin With jQuery And SVG Filters – gooey.js

By Posted on

This time I will share jQuery Plugin and tutorial about Customizable Gooey Menu Plugin With jQuery And SVG Filters – gooey.js, hope it will help you in programming stack.

Customizable Gooey Menu Plugin With jQuery And SVG Filters gooey js - Download Customizable Gooey Menu Plugin With jQuery And SVG Filters - gooey.js
File Size: 10.2 KB
Views Total: 6076
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

gooey.js is a jQuery plugin that enables you to create highly customizable popout menus with fancy gooey effects using CSS3 and SVG filters. 

How to use it:

1. Inside the page’s head section include the jQuery gooey.js plugin’s CSS file.

view source
1 <link rel="stylesheet" href="gooey.min.css">

2. Create the gooey menu with a hamburger toggle in the webpage.

view source
01 <nav id="gooey-demo">
02  
03   <input type="checkbox" class="menu-open" name="menu-open" id="menu-open">
04   <label class="open-button" for="menu-open1">
05     <span class="burger burger-1"></span>
06     <span class="burger burger-2"></span>
07     <span class="burger burger-3"></span>
08   </label>
09    
10   <a href="#" class="gooey-menu-item"> <a href="https://www.jqueryscript.net/menu/">Menu</a> 1 </a>
11   <a href="#" class="gooey-menu-item"> Menu 2 </a>
12   <a href="#" class="gooey-menu-item"> Menu 3 </a>
13   <a href="#" class="gooey-menu-item"> Menu 4 </a>
14   <a href="#" class="gooey-menu-item"> Menu 5 </a>
15   <a href="#" class="gooey-menu-item"> Menu 6 </a>
16    
17  </nav>

3. Put jQuery library and jQuery gooey.js plugin’s JavaScript files at the bottom of the webpage.

view source
1 <script src="jquery.min.js"></script>
2 <script src="gooey.min.js"></script>

4. Call the function on the nav to active the gooey menu.

view source
1 $("#gooey-demo").gooeymenu({
2   // options here
3 });

5. All default configuration options.

view source
01 $("#gooey-demo").gooeymenu({
02  
03   // 'horizontal', 'circle' or 'vertical'
04   style: "horizontal",
05   size: 70,
06   margin: "medium",
07   bgColor: "steelblue",
08   contentColor: "white",
09   transitionStep: 100,
10   bounce: false,
11   bounceLength: "medium",
12   hover: "white",
13   circle: {
14       radius: 80
15   },
16   horizontal: {
17       menuItemPosition: "glue"
18   },
19   vertical: {
20       menuItemPosition: "spaced",
21       direction: "up"
22   }
23    
24 });

6. Use the following event API to hook into animation “open” and “close” events. In this example, we change menu item colors when menu “open” and “close” events are triggered.

view source
01 $("#gooey-demo").gooeymenu({
02  
03   open: function() {
04       $(this).find(".gooey-menu-item").css("background-color", "steelblue");
05       $(this).find(".open-button").css("background-color", "steelblue");
06   },
07   close: function(gooey) {
08       $(this).find(".gooey-menu-item").css("background-color", "#00ffff");
09       $(this).find(".open-button").css("background-color", "#00ffff");
10   }
11    
12 });

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

source : jqueryscript.net

Related posts: