特效介绍
Gooey菜单圆形样式
Gooey菜单横向展开样式
Gooey菜单星形样式
Gooey菜单竖向展开样式
Gooey菜单环形样式
Gooey菜单是基于jQuery、html5和css3效果的菜单插件，点击菜单，即可以不同形态展开，并且有“粘性”效果，非常炫酷，适合手机端网站采用。由于采用了html5和css3，所以兼容性不是很好，但是如果是手机端，则可放心使用。该插件还基于Font Awesome插件，所有的图标都是字体图标，想查看如何使用字体图标，可以访问Font Awesome
使用方法
1、把“gooey”的插件文件夹到您的项目。包括以下代码片段到您的HTML文件<head>里面。如果你想在菜单中有现成的图标，你可以包含字体插件：
<link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/gooey.min.css"> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script src="js/gooey.min.js"></script>2、添加标记到您的HTML文件。您可以使用任何数量的菜单链接和任何标签或文本的菜单链接。下面提出的标记结构是可取的，以避免任何错误。您可以使用任何有效的类或身份证名称为您的 nav 标签. 这个插件会自动处理.
<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-train"></i> </a> <a href="#" class="gooey-menu-item"> <i class="fa fa-bicycle"></i> </a> <a href="#" class="gooey-menu-item"> <i class="fa fa-rocket"></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-plane"></i> </a> </nav>3、加入js：要显示您的设置，请将以下代码放在 script 标签 head 标签或者html body 标签或在一个单独的JavaScript文件。下面是一个例子，如何用粉红色粘稠的菜单设置菜单项的水平。请记住<code>gooeyMenu</code>的ID或class 函数调用相同的<code>nav</code>标签 id 或者 class在你的html类容中(本例, <code>nav</code> id 是gooey：
$(function() {
$("#gooey").gooeymenu({
style: "horizontal",
bgColor: "pink"
});
});
4、参数说明：
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} 关闭时调用
};
};
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！
