gooey菜单样式

圆形菜单与粘合效果（粘合效果是通过调整“大小”和圆的半径属性值（如，80和85））

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

接口

使用事件接口来连接动画“打开”和“关闭”事件。在这个例子中，当菜单“打开”和“关闭”事件被触发时，我们改变菜单项颜色。

	  $(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");
			}
		});
		});

Plugin details

Version: 1.0
Created by: Kirill Goltsman
Email: goltsmank@gmail.com

1. 开始

把“gooey”的插件文件夹到您的项目。包括以下代码片段到您的HTML文件<head>里面。如果你想在菜单中有现成的图标，你可以包含字体真棒插件。

<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. 添加html

添加标记到您的HTML文件。您可以使用任何数量的菜单链接和任何标签或文本的菜单链接。下面提出的标记结构是可取的，以避免任何错误。您可以使用任何有效的类或身份证名称为您的nav标签. 这个插件会自动处理.
Note: 如果你使用一些菜单上的一页，别忘了为你的隐藏复选框元素类“创造独特的ID和名称。”菜单中打开“。

<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. 加入js

要显示您的设置，请将以下代码放在script标签head标签里面, html body 标签或在一个单独的JavaScript文件。下面是一个例子，如何用粉红色粘稠的菜单设置菜单项的水平。请记住gooeyMenu的ID或class 函数调用相同的nav标签 id 或者 class在你的html类容中(本例, nav id 是 gooey)

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

4. 参数说明

定制您的gooey menu

	 style: "horizontal",    // {String} 设置gooey menu水平或竖直或圆形。值: "horizontal","vertical","circle"
	 size:70,                // {Integer} gooey菜单的大小
	 margin:"medium",        //  {String} gooey菜单列表项间距，仅当 "horizontal" 或者 "vertical" 有效。值: "small","medium" and "large"
	 bgColor: "steelblue", // {String} 背景色
	 contentColor:"white",    // {String} 字体颜色
	 transitionStep:100,     // {Integer} 动画时间
	 bounce:false,           // {Boolean}  是否反弹。值：false、true
	 bounceLength:"medium",  // {String}  设置反弹的强烈，上面的 bounce 必须为true。值: "small", "medium" and "large"
	 hover:"white",    // {String} 鼠标浮上去颜色
	 // 特殊设置
	 circle: {
		 radius:80            // {Integer} 设置菜单在打开时的半径（单位：像素）
	 },
	 horizontal: {
		 menuItemPosition:"glue" // {String} “Spaced”选项设置了菜单项的间隔，由一个指定的保证金。“Glue”选项使物品堆放。
	 },
	 vertical:  {
		 menuItemPosition:"spaced" // {String} “Spaced”选项设置了菜单项的间隔，由一个指定的保证金。“Glue”选项使物品堆放。
		 direction:"up"            // {String} 取值： "up"、"down"。gooey展开方向
	},
	 //回调函数
	 open:function(){},    // {function} 展开式调用
	 close:function() {}   // {function} 关闭时调用
 };
 };

Gooey Menu