In this tutorial, I am going to present a few demos of gooey menu using jQuery.
This gooey menu plug-in uses the jQuery library, font-awesome and demos uses Bootstrap classes for presenting this menu.
So you have to include jQuery, Bootstrap’s CSS file and plug-in’s JS and CSS files for this gooey menu to work.
In this example, a circle menu is created with glue item positions. You may adjust the radius which is kept 80 for this demo.
Follow these steps for creating this circle menu:
First of all, the CSS files of Bootstrap, gooey plug-in, font-awesome and live-demo are included in the <head> section.
You may get these files packaged with the plug-in by following this link (credit: dominicg666). Download the zipped file and find these files:
<link rel=”stylesheet” href=”http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”css/gooey/gooey.min.css”>
<link rel=”stylesheet” href=”css/gooey/font-awesome.min.css”>
<link rel=”stylesheet” href=”css/gooey/livedemo.css”>
You also need to include jQuery and plug-in JS file:
In the <body> section, the script is written for initiating the plug-in with certain options. For example, in the above demo, the bgColor, ContentColor, style, and many other options are used. See the <script> section in demo page.
In the markup section, the input type checkbox is created with three lines, that is visible as demo page loads.
As you click this, the menu opens with glued items which radius is kept 80.
See the complete code in demo page’s code section.
In this example, a horizontal menu is created by using the same plug-in. The difference is style option which is kept horizontal as compared to circle in above example. See the example and complete code by following the links below:
In this example, a round menu with glued items is created by using the circle style. To make it round, the radius value is used 85 while size value is 80.
The bgColor and hover colors are also changed than above demos.
Get the round menu code from the demo page.
Again, by adjusting the option values, you may create a vertical gooey menu as well. See the following demo, that expands vertically as you click on three lines (which is a checkbox):
You can use open and close events for changing the look like color or other properties or perform a certain action as the menu opens or closes.
See the following demo where menu color is changed upon closing and opening the menu:
You may find the complete code at the demo page.