Hit enter after type your search item

A jQuery gooey menu plug-in using with Bootstrap : 5 demos

The gooey menu plug-in

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.


A demo of gooey circle menu with items

In this example, a circle menu is created with glue item positions. You may adjust the radius which is kept 80 for this demo.

jQuery gooey menu

See online demo and code

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:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

<script src=”js/gooey/gooey.min.js”></script>

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.

A demo of horizontal menu

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:

jQuery gooey horizontal

See online demo and code

A demo of round menu with glued item

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.

jQuery gooey round

See online demo and code

Get the round menu code from the demo page.

A vertical gooey menu example

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):

jQuery gooey vertical

See online demo and code

A demo of changing colors as menu open and closes

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:

jQuery gooey events

See online demo and code

You may find the complete code at the demo page.

This div height required for enabling the sticky sidebar