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

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.

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

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

<nav id="gooey-demo">

  <input type="checkbox" class="menu-open" name="menu-open" id="menu-open">
  <label class="open-button" for="menu-open1">
    <span class="burger burger-1"></span>
    <span class="burger burger-2"></span>
    <span class="burger burger-3"></span>
  </label>
  
  <a href="#" class="gooey-menu-item"> Menu 1 </a>
  <a href="#" class="gooey-menu-item"> Menu 2 </a>
  <a href="#" class="gooey-menu-item"> Menu 3 </a>
  <a href="#" class="gooey-menu-item"> Menu 4 </a>
  <a href="#" class="gooey-menu-item"> Menu 5 </a>
  <a href="#" class="gooey-menu-item"> Menu 6 </a>
  
 </nav>

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

<script src="jquery.min.js"></script>
<script src="gooey.min.js"></script>

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

$("#gooey-demo").gooeymenu({
  // options here
});

5. All default configuration options.

$("#gooey-demo").gooeymenu({

  // 'horizontal', 'circle' or 'vertical'
  style: "horizontal",
  size: 70,
  margin: "medium",
  bgColor: "steelblue",
  contentColor: "white",
  transitionStep: 100,
  bounce: false,
  bounceLength: "medium",
  hover: "white",
  circle: {
      radius: 80
  },
  horizontal: {
      menuItemPosition: "glue"
  },
  vertical: {
      menuItemPosition: "spaced",
      direction: "up"
  }
  
});

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.

$("#gooey-demo").gooeymenu({

  open: function() {
      $(this).find(".gooey-menu-item").css("background-color", "steelblue");
      $(this).find(".open-button").css("background-color", "steelblue");
  },
  close: function(gooey) {
      $(this).find(".gooey-menu-item").css("background-color", "#00ffff");
      $(this).find(".open-button").css("background-color", "#00ffff");
  }
  
});

---

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