Menu Styles

$(function() {
 $("#gooey-h").gooeymenu({
  style: "horizontal",
  contentColor: "white",
  horizontal: {
            menuItemPosition: "glue"
        }
 });
 });

$(function() {
 $("#gooey-round").gooeymenu({
        bgColor: "#ffc0cb",
        contentColor: "white",
        style: "circle",
        circle: {
            radius: 85
        },
        size: 80
 });
});

     $(function() {
        $("#gooey-v").gooeymenu({
        style: "vertical",
        vertical: {
            menuItemPosition: "spaced",
            direction: "up"
        }
      });
    });
    

Event API

  $(function() {
  $("#gooey-round").gooeymenu({    
        circle: {
            radius: 85
        },
        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");
        }
    });
    });

            

1. Getting started

Put "gooey" plugin folder into your project. Include below code snippets into head section of your html file. You may include Font Awesome plugin if you want ready-made icons in your menu.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="gooey/src/gooey.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="gooey/src/gooey.min.css">

2. Add Markup

Add markup to your html file. You can use any number of menu links and any labels or text for your menu links. The markup structure proposed below is desirable to avoid any bugs. You can use any valid class or id name for your nav element. This will be automatically handled by the plugin.
Note: If you use several menus on one page, don't forget to create unique ids and names for your hidden checkbox elements that have class ".menu-open".

<nav id="gooey">
<input type="checkbox" class="menu-open" name="menu-open" id="menu-open"/>
<label class="open-button" for="menu-open">
<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">  <i class="fa fa-cab"> </i>  </a>
<a href="#" class="gooey-menu-item">  <i class="fa fa-automobile"> </i>  </a>
<a href="#" class="gooey-menu-item">  <i class="fa fa-truck"> </i>  </a>
<a href="#" class="gooey-menu-item">  <i class="fa fa-rocket"> </i>  </a>
</nav> 

3. Hook up your menu

To indicate your settings, put the following code within a script tag in your head section, html body element or in a separate Javascript file. Here is an example of how to set a horizontal Gooey Menu with pink menu items. Please, remember that a selector's id or class on which gooeyMenu function is called should be identical to nav element id or class in your html markup (in this example, nav id is gooey)

$(function() {
 $("#gooey").gooeymenu({
  style: "horizontal",
  bgColor: "pink"
 });
 });

4. Specify your settings

You have a list of options to tailor a gooey menu to your needs

 style: "horizontal",    // {String} Sets gooey menu style. Accepted values: "horizontal","vertical","circle"
 size:70,                // {Integer} Sets a menu item's size in pixels
 margin:"medium",        //  {String} Sets the margin between menu items. Acts only if "spaced" option of "horizontal" or "vertical" style is selected. Accepted values: "small","medium" and "large"
 bgColor: "steelblue", // {String} Sets background-color of a menu-item element
 contentColor:"white",    // {String} Sets font color of a menu item's content;
 transitionStep:100,     // {Integer}  Sets a speed rate at which each menu item unfolds in milliseconds
 bounce:false,           // {Boolean}  Turns "bounce" effect off if {false} and on if {true}
 bounceLength:"medium",  // {String}   Sets the bounce length, if bounce effect is enabled. Accepted values: "small", "medium" and "large"
 hover:"white",    // {String} Sets menu items' color on hover
 
 // Style-specific settings
 
 circle: {
     radius:80            // {Integer} Sets a radius of menu circle when a menu is opened (in pixels)
 },
 horizontal: {
     menuItemPosition:"glue" // {String} "Spaced" option sets the spacing of menu items by a specified margin. "Glue" option makes items stacked.
 },
 vertical:  {
     menuItemPosition:"spaced" // {String} "Spaced" option sets the spacing of menu items by a specified margin. "Glue" option makes items stacked.
     direction:"up"            // {String} Values: "up" or "down". A direction in which vertical menu unfolds
},

 //Callback API
 open:function(){},    // {function} Fires when a gooey menu is opened.
$(this) context for the function is the element on which gooeymenu was called
 close:function() {}   // {function} Fires when a gooey menu is closed. $(this) context for the function is the element on which gooeymenu was called
};
};

Styling your menu

Style menu's margins and indentation. You may set menu items indentation by changing left/top/right/bottom or margin properties of menu items and menu open button. Since menu's size will depend on a number of items and menu style selected, you have a full freedom to set position of your menu according to your needs. Note, that .navimenu container is relatively positioned by default and menu items are absolutely positioned.

    .navimenu .gooey-menu-item, .navimenu .open-button {
             border-radius: 100%;
             left: 50px; /* Style left indent */
             top:100px;  /*  Style top indent */
             position: absolute;
       }

Change a burger icon's background

 .navimenu .burger {
     background: white;
 }

Credits

Scripts and plugins used in the demo and these docs

1. jQuery
2. FontAwesome
3. Google Code Prettify