首先 引入css

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/gooey.min.css">

引入js

<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script src="js/gooey.min.js"></script>

html:

<div class="nav1">
<nav id="gooey-upper">
<input type="checkbox" class="menu-open" name="menu-open1" id="menu-open1"/>
<label class="open-button" for="menu-open1">
<span class="burger burger-1"></span>
<span class="burger burger-2"></span>
<span class="burger burger-3"></span>
</label>

<a href="#features" class="gooey-menu-item"> <i title="Features" class="fa fa-cog fa-2x"></i> </a>
<a href="#h-spaced-menu" class="gooey-menu-item"> <i title="Horizontal Menu" class="fa fa-arrows-h fa-2x"></i> </a>
<a href="#menu-v-example" class="gooey-menu-item"> <i title="Vertical Menu" class="fa fa-arrows-v fa-2x"></i> </a>
<a href="#docs" class="gooey-menu-item"> <i title="Docs" class="fa fa-book fa-2x"></i> </a>
<a href="#event-api" class="gooey-menu-item"> <i title="Event API" class="fa fa-code fa-2x"></i> </a>
<a href="#round" class="gooey-menu-item"> <i title="Round Menu" class="fa fa-circle fa-2x"></i> </a>
</nav>
</div>
<div class="nav1">
<nav id="gooey-h">
<input type="checkbox" class="menu-open" name="menu-open2" id="menu-open2"/>
<label class="open-button" for="menu-open2">
<span class="burger burger-1"></span>
<span class="burger burger-2"></span>
<span class="burger burger-3"></span>
</label>

<a href="#features" class="gooey-menu-item"> <i title="Features" class="fa fa-cog fa-2x"></i> </a>
<a href="#h-spaced-menu" class="gooey-menu-item"> <i title="Horizontal Menu" class="fa fa-arrows-h fa-2x"></i> </a>
<a href="#menu-v-example" class="gooey-menu-item"> <i title="Vertical Menu" class="fa fa-arrows-v fa-2x"></i> </a>
<a href="#docs" class="gooey-menu-item"> <i title="Docs" class="fa fa-book fa-2x"></i> </a>
<a href="#event-api" class="gooey-menu-item"> <i title="Event API" class="fa fa-code fa-2x"></i> </a>
<a href="#round" class="gooey-menu-item"> <i title="Round Menu" class="fa fa-circle fa-2x"></i> </a>
</nav>
</div>

js:

<script>
$(function(){
$("#gooey-upper").gooeymenu({
bgColor: "#ff6666",
contentColor: "white",
style: "circle",
horizontal: {
menuItemPosition: "glue"
},
vertical: {
menuItemPosition: "spaced",
direction: "up"
},
circle: {
radius: 80
},
margin: "small",
size: 90,
bounce: true,
bounceLength: "small",
transitionStep: 100,
hover: "#e55b5b"
});
$("#gooey-h").gooeymenu({
bgColor: "#68d099",
contentColor: "white",
style: "horizontal",
horizontal: {
menuItemPosition: "glue"
},
vertical: {
menuItemPosition: "spaced",
direction: "up"
},
circle: {
radius: 90
},
margin: "small",
size: 80,
bounce: true,
bounceLength: "small",
transitionStep: 100,
hover: "#5dbb89"
});
$("#gooey-round").gooeymenu({
bgColor: "#68d099",
contentColor: "white",
style: "circle",
horizontal: {
menuItemPosition: "spaced"
},
vertical: {
menuItemPosition: "spaced",
direction: "up"
},
circle: {
radius: 85
},
margin: "small",
size: 80,
bounce: true,
bounceLength: "small",
transitionStep: 100,
hover: "#5dbb89"
});
$("#gooey-API").gooeymenu({
bgColor: "#68d099",
contentColor: "white",
style: "circle",
circle: {
radius: 85
},
margin: "small",
size: 70,
bounce: true,
bounceLength: "small",
transitionStep: 100,
hover: "#5dbb89",
open: function () {
$(this).find(".gooey-menu-item").css("background-color", "steelblue");
$(this).find(".open-button").css("background-color", "steelblue");
},
close: function () {
$(this).find(".gooey-menu-item").css("background-color", "#ffdf00");
$(this).find(".open-button").css("background-color", "#ffdf00");
}
});
$("#gooey-v").gooeymenu({
bgColor: "#68d099",
contentColor: "white",
style: "vertical",
horizontal: {
menuItemPosition: "glue"
},
vertical: {
menuItemPosition: "spaced",
direction: "up"
},
circle: {
radius: 90
},
margin: "small",
size: 70,
bounce: true,
bounceLength: "small",
transitionStep: 100,
hover: "#68d099"
});

})
/*style:gooey菜单的样式,可用值有:”horizontal”,”vertical”,”circle”。
size:菜单项的尺寸,单位像素。
margin:菜单项之间的margin值。只有在”horizontal” 或 “vertical”参数设置为”spaced”时才有效。可用值有:”small”,”medium” 和 “large”。
bgColor:设置菜单项的背景颜色。
contentColor:设置菜单项的字体颜色。
transitionStep:设置菜单项打开的速度,单位毫秒。
bounce:是否打开”bounce”效果。
bounceLength:如果打开了”bounce”效果,设置bounce的长度。可用值有:”small”, “medium” 和 “large”。
hover:设置鼠标滑过菜单项时的颜色。
circle:设置菜单打开时圆形的半径。
horizontal:menuItemPosition:设置为”Spaced”表示要指定菜单项之间的margin值。设置为”Glue”表示菜单项堆叠在一起。
vertical:menuItemPosition:设置为”Spaced”表示要指定菜单项之间的margin值。设置为”Glue”表示菜单项堆叠在一起。
vertical:direction:菜单的垂直展开方向,可用值有:”up” 或 “down”。
回调函数
open:function(){}:菜单打开是触发。
close:function() {}:菜单关闭时触发。*/
</script>

效果图:

基于jQuery弹性展开收缩菜单插件gooey.js的更多相关文章

  1. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  2. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  3. 一款效果精致的 jQuery 多层滑出菜单插件

    想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...

  4. 基于jQuery右下角旋转环状菜单代码

    基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览    ...

  5. js之展开收缩菜单,用到window.onload ,onclick,

    目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果 一.准备阶段 html文件 <!DOCTYPE html&g ...

  6. 基于jQuery垂直多级导航菜单代码

    基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce&q ...

  7. 基于jQuery图片元素网格布局插件

    基于jQuery图片元素网格布局插件是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件jMosaic.效果图如下: 在线预览   源码下载 实现的代码. html代码: <c ...

  8. 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

    1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...

  9. 基于jquery的json转table插件jsontotable

    分享一款基于jquery的json转table插件jsontotable.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container ...

随机推荐

  1. LINUX下编译安装最新版本mysql

    通过参考其他文章 1.下载安装mysql-5.5.30.tar.gz与cmake.2.8.11.2.tar.gz (1)先安装cmake(mysql5.5以后是通过cmake来编译的) [root@ ...

  2. Android 架构艺术之MVP

    MVP是Google官方发布的Android开发相关的架构知识.本文要讲解的是一种最基本的MVP的实现方式,它使用手动的依赖注入来提供具有本地和远程数据源的存储库.异步任务处理回调. 基本的MVP的项 ...

  3. python爬虫-知乎登录

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- ''' Required - requests (必须) - pillow (可选) ''' import ...

  4. Kotlin的扩展函数:扩展Android框架(KAD 08)

    作者:Antonio Leiva 时间:Jan 11, 2017 原文链接:https://antonioleiva.com/extension-functions-kotlin/ 扩展函数是Kotl ...

  5. Python2 基于urllib2 的HTTP请求类

    一个利用urllib2模块编写的下载器,虽然有了requests模块,但是毕竟标准库 import urllib2,random class strong_down(): def __init__(s ...

  6. 数娱科技:借助VR技术可让你了解自己的大脑

    你可能很好奇自己的大脑,如果你是一个脑部病患,可能更想了解下自己的大脑.好消息是,脑机接口让这个想法成为可能. 在上周六,AR/VR科技公司广州数娱科技发布了联合5家单位共同研发的"VR人脑 ...

  7. dev gridcontrol把event事件转换成命令

    可以通过继承gridcontrol的形式来实现 定义DataGridDoubleClickCommand依赖属性 class MyGridControl : GridControl    {      ...

  8. 重要的几个热键[Tab], [ctrl]-c, [ctrl]-d

    来源于:鸟哥的Linux私房菜 在继续后面的章节之前,这里很需要跟大家再来报告一件事,那就是我们的文字模式里头具有很多的功能按键, 这些按键可以辅助我们进行指令的编写与程序的中断呢!这几个按键请大家务 ...

  9. idea新建项目文件名为红色的解决办法

    Perference->version Control ->Directory添加项目路径,vcs选<none> 即可.

  10. 【ARM】S3C6410芯片的启动流程

    S3C6410芯片的启动流程 (1) 上电后首先运行iRom(BL0)内的代码,主要完成时钟和看门狗等外围器件的初始化.(2) 拷贝SD卡或者NnadFlash中的前4k(BL1)代码到片内ram(垫 ...