jQuery弹性展开收缩菜单插件gooey.js
分享一款基于jQuery弹性展开收缩菜单插件gooey.js。这是一款基于gooey.js插件实现的弹性菜单特效代码。效果图如下：
实现的代码。
html代码：
<header class="plugin-demo-header">
<h1>Gooey Menu</h1>
<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>
</header>
<div class="container">
<div id="page1">
<h1 class="section-label">
Menu Styles</h1>
<div class="section-cont" id="h-spaced-menu">
<i class="desc">Horizontal menu with glued items</i>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-5">
<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="#" 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>
</nav>
</div>
<div class="col-xs-12 col-md-7 code-example">
<pre class="prettyprint linenums">
$(function() {
$("#gooey-h").gooeymenu({
style: "horizontal",
contentColor: "white",
horizontal: {
menuItemPosition: "glue"
}
});
});
</pre>
</div>
</div>
</div>
<div class="section-cont" id="round">
<div class="row">
<div class="col-md-5 col-xs-12 col-sm-6 round-example">
<i class="desc">Round menu with glued items (the glued effect may be achieved by adjusting
"size" and circle radius property values closer (e.g, 80 and 85)) </i>
<nav id="gooey-round">
<input type="checkbox" class="menu-open" name="menu-open3" id="menu-open3"/>
<label class="open-button" for="menu-open3">
<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>
</div>
<div class="col-md-7 col-xs-12 code-example">
<pre class="prettyprint linenums">
$(function() {
$("#gooey-round").gooeymenu({
bgColor: "#ffc0cb",
contentColor: "white",
style: "circle",
circle: {
radius: 85
},
size: 80
});
});
</pre>
</div>
</div>
</div>
<div class="section-cont" id="menu-v-example">
<div class="row">
<div class="col-md-5 col-xs-12 vertical-example">
<i class="desc">Vertical menu ("up" and "down" direction may be achieved by changing
corresponding properties). </i>
<nav id="gooey-v">
<input type="checkbox" class="menu-open" name="menu-open4" id="menu-open4"/>
<label class="open-button" for="menu-open4">
<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>
</nav>
</div>
<div class="col-md-7 col-xs-12 code-example">
<pre class="prettyprint linenums">
$(function() {
$("#gooey-v").gooeymenu({
style: "vertical",
vertical: {
menuItemPosition: "spaced",
direction: "up"
}
});
});
</pre>
</div>
</div>
</div>
<h1 class="section-label">
Event API</h1>
<div class="section-cont" id="event-api">
<div class="row">
<div class="col-md-5 col-xs-12 event-api-ex">
<i class="desc">Use event API to hook into animation "open" and "close" events. In this
example, we change menu item colors when menu "open" and "close" events are triggered.
</i>
<nav id="gooey-API">
<input type="checkbox" class="menu-open" name="menu-open5" id="menu-open5"/>
<label class="open-button" for="menu-open5">
<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>
</div>
<div class="col-md-7 col-xs-12 code-example">
<pre class="prettyprint linenums">
$(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");
}
});
}); </pre>
</div>
</div>
</div>
</div>
<div id="docs">
<div class="plugin-details">
<h1 class="section-label">
Plugin details</h1>
<p>
<span class="bold">Version</span>: 1.0
<br>
<span class="bold">Created by</span>: Kirill Goltsman
<br>
<span class="bold">Email</span>: goltsmank@gmail.com
</p>
</div>
<h1 class="section-label">
1. Getting started</h1>
<p>
Put "gooey" plugin folder into your project. Include below code snippets into <code>
head</code> section of your html file. You may include Font Awesome plugin if
you want ready-made icons in your menu.
</p>
<pre class="prettyprint linenums lang-html">
<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">
</pre>
<h1 class="section-label">
2. Add Markup</h1>
<p>
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 <code>nav</code>
element. This will be automatically handled by the plugin.
<br>
<span class="bold" style="color: red;">Note:</span> 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".
</p>
<pre class="prettyprint linenums html-lang">
<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> </pre>
<h1 class="section-label">
3. Hook up your menu</h1>
<p>
To indicate your settings, put the following code within a <code>script</code> tag
in your <code>head</code> section, html <code>body</code> 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 <code>gooeyMenu</code>
function is called should be identical to <code>nav</code> element id or class in
your html markup (in this example, <code>nav</code> id is <code>gooey</code>)
</p>
<pre class="prettyprint linenums">
$(function() {
$("#gooey").gooeymenu({
style: "horizontal",
bgColor: "pink"
});
});
</pre>
<h1 class="section-label">
4. Specify your settings</h1>
<p>
You have a list of options to tailor a gooey menu to your needs
</p>
<pre class=" prettyprint linenums"> 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.
<code>$(this)</code> context for the function is the element on which <code>gooeymenu</code> was called
close:function() {} // {function} Fires when a gooey menu is closed. <code>$(this)</code> context for the function is the element on which <code>gooeymenu</code> was called
};
};
</pre>
<h1 class="section-label">
Styling your menu</h1>
<p>
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.
</p>
<pre class="prettyprint linenums">
.navimenu .gooey-menu-item, .navimenu .open-button {
border-radius: 100%;
left: 50px; /* Style left indent */
top:100px; /* Style top indent */
position: absolute;
}
</pre>
<p>
Change a burger icon's background</p>
<pre class='prettyprint linenums'>
.navimenu .burger {
background: white;
}
</pre>
<h1 class="section-label">
Credits</h1>
<p>
Scripts and plugins used in the demo and these docs</p>
<ol class='bold'>
<li>jQuery</li>
<li>FontAwesome </li>
<li>Google Code Prettify </li>
</ol>
</div>
</div>
<header class="plugin-demo-header">
via：http://www.w2bc.com/Article/36782
jQuery弹性展开收缩菜单插件gooey.js的更多相关文章
- 基于jQuery弹性展开收缩菜单插件gooey.js
首先 引入css <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel ...
- js之展开收缩菜单，用到window.onload ,onclick,
目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果 一.准备阶段 html文件 <!DOCTYPE html&g ...
- 一款效果精致的 jQuery 多层滑出菜单插件
想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...
- jQuery美化下拉菜单插件dropkick
dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...
- JQuery缓冲加载图片插件lazyload.js的使用方法
lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...
- jQuery实现用户头像裁剪插件cropbox.js
几乎每一个网页是必备图片上传,图片裁剪功能,这里通过cropbox.js插件实现该功能. <script src="js/jquery-1.11.1.min.js">& ...
- Jquery div展开收缩
<html> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...
- jQuery 当前展开其他收缩 三级下拉菜单（转载）
jQuery可展开收缩三级下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- jquery多级手风琴插件–accordion.js
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...
随机推荐
- spring-data-redis读写分离
在对Redis进行性能优化时,一直想对Redis进行读写分离.但由于项目底层采用spring-data-redis对redis进行操作,参考spring官网却发现spring-data-redis目前 ...
- Nginx https证书部署
1 获取证书 Nginx文件夹内获得SSL证书文件 1_www.domain.com_bundle.crt 和私钥文件 2_www.domain.com.key,1_www.domain.com_bu ...
- SharePoint自动化部署，利用PowerShell 导出/导入AD中的用户
这几个月一直在帮客户改需求,部署.我已经心力憔悴,经过一段时间的摸索,我对用PowerShell实现自动化部署也有了一些心得,比如说利用PowerShell导出导入AD中的User.在基于ShareP ...
- 如何获取 docker 容器(container)的 ip 地址（转）
1. 进入容器内部后 cat /etc/hosts 会显示自己以及(– link)软连接的容器IP 2.使用命令 docker inspect --format '{{ .NetworkSetting ...
- java中多个数字运算后值不对（失真）处理方法
最近遇到一个bug ,在java里面计算两个数字相减,633011.20-31296.30 得到的结果居然是601714.8999999999,丢失精度了,原来这是Java浮点运算的一个bug. 解决 ...
- mongodb 远程访问配置
1.首先修改mongodb的配置文件 让其监听所有外网ip 编辑文件:/etc/mongodb.conf 修改后的内容如下: bind_ip = 0.0.0.0 port = 27017 auth=t ...
- 【剑道】日常练习相关Q&A 整理
Q:如何使手腕灵活,手指灵活.有力量? A: 1)提重物.将手腕搁在膝盖上,凭手指和手腕的力量将重物提上来 2)指卧撑.用十个指头着地的方法做俯卧撑 Q:怎样才算肩膀放松,如何方式? A:收放自如,多 ...
- supervisor 安装脚本
mkdir /data/tools && cd /data/tools wget --no-check-certificate https://bootstrap.pypa.io/ez ...
- java线程五种状态
java线程五种状态: 创建 -> 就绪 -> 运行 -> 销毁 创建 -> 就绪 -> 运行 -> 等待(缺少资源) -> 销毁 下图:各种状态转换
- FFmpeg(9)-解码器解码代码演示(FFmpeg调用MediaCodec实现硬解码、多线程解码、及音视频解码性能测试)
一.AVFrame 用来存放解码后的数据. [相关函数] AVFrame *frame = av_frame_alloc(); // 空间分配,分配一个空间 ...