首页 > 特效插件 > 导航菜单 >  jQuery Gooey Menu菜单插件，弹性展开收缩效果正文

jQuery Gooey Menu菜单插件，弹性展开收缩效果

特效介绍

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="https://5.jimth.com/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} 关闭时调用
 };
 };

TAGS: jQuery  Gooey  Menu  菜单  插件  弹性  展开  收缩  效果