以下是 jQuery弹性展开收缩菜单插件gooey.js特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery弹性展开收缩菜单插件gooey.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
<link rel="stylesheet" href="css/livedemo.css">
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script src="js/gooey.min.js"></script>
<style>
.prettyprint ol.linenums > li {
list-style-type: decimal;
}
</style>
</head>
<body>
<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"
});
});
</script>
<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="js/jquery-2.1.3.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>
</body>
</html>
JS代码(gooey.min.js):
(function(g){
g.gooeymenu=function(h,q){
var k=g(h);
k.addClass("navimenu");
var b=this,a=b.options=g.extend({
}
,g.gooeymenu.defaults,q);
b.els={
item:k.find(".gooey-menu-item"),checkbox:k.find(".menu-open"),button:k.find(".open-button")}
;
b.methods={
setup:function(){
var d={
small:1.4,medium:1.8,large:2.1}
,f={
small:1.3,medium:1.6,large:2.1}
,c;
for(c in d)a.margin===c?a.margin=d[c]:null;
for(var e in f)a.bounceLength===e?a.bounceLength=f[e]:null;
b.methods.responsiveStyles();
b.els.item.hover(function(){
a.currentBg=b.els.item.css("background-color");
g(this).css("background-color",a.hover)}
,function(){
g(this).css("background-color",a.currentBg)}
);
!0===a.bounce&&b.methods.bounce()}
,setEvents:function(){
["open","close"].forEach(function(d,b){
k.on(d,function(){
a[d]&&a[d].apply(this,arguments)}
)}
)}
,bounce:function(){
if(!0===a.bounce){
var d=b.els.item.css("transition-timing-function");
b.els.checkbox.on("change",function(){
g(this).is(":checked")?b.els.item.css({
"transition-timing-function":"cubic-bezier(0.8,0.84,0.44,"+a.bounceLength+")","-o-transition-timing-function":"cubic-bezier(0.8,0.84,0.44,"+a.bounceLength+")","-moz-transition-timing-function":"cubic-bezier(0.8,0.84,0.44,"+a.bounceLength+")","-webkit-transition-timing-function":"cubic-bezier(0.8,0.84,0.44,"+a.bounceLength+")","-ms-transition-timing-function":"cubic-bezier(0.8,0.84,0.44,"+a.bounceLength+")"}
):b.els.item.css({
"transition-timing-function":d,"-moz-transition-timing-function":d,"-o-transition-timing-function":d,"-webkit-transition-timing-function":d}
)}
)}
}
,circle:function(){
k.trigger("open");
var d,f,c,e,m,h,n,r=b.els.item.length,l=a.transitionStep,q=Math.PI,t=360/r,p=t=360/r;
f=a.circle.radius;
b.els.item.each(function(){
b.els.checkbox.is(":checked")?(d=q*p/180,c=Math.abs(Math.cos(d)),e=f*c,m=Math.sqrt(f*f-e*e),h=b.methods.periodCalc(p).x,n=b.methods.periodCalc(p).y,g(this).css({
transform:"translate3d("+h+e+"px,"+n+m+"px,0)","-o-transform":"translate3d("+h+e+"px,"+n+m+"px,0)","-webkit-transform":"translate3d("+h+e+"px,"+n+m+"px,0)","-moz-transform":"translate3d("+h+e+"px,"+n+m+"px,0)","-ms-transform":"translate3d("+h+e+"px,"+n+m+"px,0)","transition-duration":l+"ms","-o-transition-duration":l+"ms","-webkit-transition-duration":l+"ms","-moz-transition-duration":l+"ms"}
),p+=t,l+=a.transitionStep):(b.els.item.css({
transform:"translate3d(0,0,0)","-moz-transform":"translate3d(0,0,0)","-webkit-transform":"translate3d(0,0,0)","-ms-transform":"translate3d(0,0,0)","-o-transform":"translate3d(0,0,0)"}
),p=360/r,l=a.transitionStep,k.trigger("close"))}
)}
,periodCalc:function(a){
return{
x:90>a||270<a?"":"-",y:180<a?"":"-"}
}
,linear:function(d){
k.trigger("open");
var f="horizontal"===a.style?a.horizontal.menuItemPosition:a.vertical.menuItemPosition,c=d[f].init,e=a.transitionStep;
b.els.item.each(function(){
b.els.checkbox.is(":checked")?"horizontal"===a.style?(g(this).css({
transform:"translate3d("+c+"px,0,0)","-ms-transform":"translate3d("+c+"px,0,0)","-o-transform":"translate3d("+c+"px,0,0)","-moz-transform":"translate3d("+c+"px,0,0)","-webkit-transform":"translate3d("+c+"px,0,0)","transition-duration":e+"ms","-o-transition-duration":e+"ms","-webkit-transition-duration":e+"ms","-moz-transition-duration":e+"ms"}
),c+=d[f].init,e+=a.transitionStep):"vertical"===a.style&&(g(this).css({
"transition-duration":e+"ms","-moz-transition-duration":e+"ms","-o-transition-duration":e+"ms","-webkit-transition-duration":e+"ms"}
),"down"===a.vertical.direction?g(this).css({
transform:"translate3d(0,"+c+"px,0)","-moz-transform":"translate3d(0,"+c+"px,0)","-o-transform":"translate3d(0,"+c+"px,0)","-webkit-transform":"translate3d(0,"+c+"px,0)","-ms-transform":"translate3d(0,"+c+"px,0)"}
):"up"===a.vertical.direction&&g(this).css({
transform:"translate3d(0,-"+c+"px,0)","-moz-transform":"translate3d(0,-"+c+"px,0)","-webkit-transform":"translate3d(0,-"+c+"px,0)","-o-transform":"translate3d(0,-"+c+"px,0)","-ms-transform":"translate3d(0,-"+c+"px,0)"}
),c+=d[f].init,e+=a.transitionStep):(b.els.item.css({
transform:"translate3d(0,0,0)","-moz-transform":"translate3d(0,0,0)","-webkit-transform":"translate3d(0,0,0)","-ms-transform":"translate3d(0,0,0)","-o-transform":"translate3d(0,0,0)"}
),c=d[f].init,e=a.transitionStep,k.trigger("close"))}
)}
,translate:function(){
var d={
glue:{
init:a.size}
,spaced:{
init:a.size*a.margin}
}
;
b.els.checkbox.on("change",function(){
b._callbacks[a.style](d)}
)}
,createOn:function(a,b,c,e){
b=document.createElementNS("http://www.w3.org/2000/svg",b);
for(var g in c)c.hasOwnProperty(g)&&b.setAttribute(g,c[g]);
e&&b.appendChild(document.createTextNode(e));
return a.appendChild(b)}
,responsiveStyles:function(){
var d=0<window.innerWidth?window.innerWidth:screen.width;
320<=d&&480>=d?(a.size/=1.4,a.circle.radius/=1.2):480<d&&768>=d?a.size/=1.2:780<d&&1024>=d&&(a.circle.radius/=1.2,a.size/=1.1);
b.els.item.css({
width:a.size+"px",height:a.size+"px",color:a.contentColor,"background-color":a.bgColor,"line-height":a.size+"px"}
);
b.els.button.css({
width:a.size+"px",height:a.size+"px","background-color":a.bgColor,"line-height":a.size+"px"}
);
k.find(".burger").css({
"font-size":".8em",width:a.size/2+"px",height:"3px",left:a.size/4+"px"}
)}
}
;
b._callbacks={
vertical:b.methods.linear,horizontal:b.methods.linear,circle:b.methods.circle}
;
b.init=function(){
var a=document.createElementNS("http://www.w3.org/2000/svg","svg"),f=g(".navimenu").index(k);
a.setAttribute("id","gooeySVG"+f);
a.setAttribute("class","gooeySVG");
k.append(a);
a=document.getElementById("gooeySVG"+f);
b.methods.createOn(a,"defs",{
id:"defs"+f}
);
a=document.getElementById("defs"+f);
b.methods.createOn(a,"filter",{
id:"goo-shadow"+f,overflow:"hidden"}
);
var c=document.getElementById("goo-shadow"+f);
b.methods.createOn(c,"feGaussianBlur",{
"in":"SourceGraphic",result:"blur",stdDeviation:"10"}
);
b.methods.createOn(c,"feColorMatrix",{
"in":"blur",mode:"matrix",values:"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8",result:"goo"}
);
b.methods.createOn(c,"feGaussianBlur",{
"in":"goo",stdDeviation:"2",result:"shadow"}
);
b.methods.createOn(c,"feColorMatrix",{
"in":"shadow",mode:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0",result:"shadow"}
);
b.methods.createOn(c,"feOffset",{
"in":"shadow",dx:"1",dy:"1",result:"shadow"}
);
b.methods.createOn(c,"feComposite",{
in2:"shadow","in":"goo",result:"goo"}
);
b.methods.createOn(c,"feComposite",{
in2:"goo","in":"SourceGraphic",result:"mix"}
);
b.methods.createOn(a,"filter",{
id:"goo"+f}
);
a=document.getElementById("goo"+f);
b.methods.createOn(a,"feGaussianBlur",{
"in":"SourceGraphic",result:"blur",stdDeviation:"10"}
);
b.methods.createOn(a,"feColorMatrix",{
"in":"blur",mode:"matrix",values:"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7",result:"goo"}
);
b.methods.createOn(a,"feComposite",{
in2:"goo","in":"SourceGraphic",result:"mix"}
);
k.css({
"-webkit-filter":"url('#goo-shadow"+f+"')",filter:"url('#goo-shadow"+f+"')","-ms-filter":"url('#goo-shadow"+f+"')","-o-filter":"url('#goo-shadow"+f+"')"}
);
b.methods.setEvents();
b.methods.setup();
b.methods.translate.apply(this,arguments)}
;
b.init()}
;
g.gooeymenu.defaults={
style:"horizontal",size:70,margin:"medium",bgColor:"steelblue",contentColor:"white",transitionStep:100,bounce:!1,bounceLength:"medium",hover:"white",circle:{
radius:80}
,horizontal:{
menuItemPosition:"glue"}
,vertical:{
menuItemPosition:"spaced",direction:"up"}
,open:function(){
}
,close:function(){
}
}
;
g.fn.gooeymenu=function(h){
void 0===h&&(h={
}
);
if(h&&"object"===typeof h)return this.each(function(){
new g.gooeymenu(this,h)}
)}
}
)(jQuery);
CSS代码(gooey.min.css):
.navimenu{position:relative;min-width:100px;min-height:100px;margin:auto auto auto -80px;padding-top:20px;padding-left:80px;box-sizing:border-box;text-align:left;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;outline:transparent solid 5px;transform-style:preserve-3d}
.navimenu .gooey-menu-item,.navimenu .open-button{border-radius:100%;position:absolute;color:#fff;text-align:center;font-size:.9em;transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transition:transform ease-out 200ms;-ms-transition:transform ease-out 200ms;-o-transition:transform ease-out 200ms;-moz-transition:transform ease-out 200ms;-webkit-transition:transform ease-out 200ms;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;outline:transparent solid 5px;transform-style:preserve-3d}
.navimenu .menu-open{display:none}
.navimenu .burger{background:#fff;display:block;position:absolute;top:50%;left:50%;margin-top:-1.5px;transition:transform 200ms;-ms-transition:transform 200ms;-moz-transition:transform 200ms;-webkit-transition:transform 200ms;-o-transition:transform 200ms}
.navimenu .burger-1{transform:translate3d(0,-8px,0);-moz-transform:translate3d(0,-8px,0);-o-transform:translate3d(0,-8px,0);-webkit-transform:translate3d(0,-8px,0);-ms-transform:translate3d(0,-8px,0)}
.navimenu .burger-2{transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}
.navimenu .burger-3{transform:translate3d(0,8px,0);-ms-transform:translate3d(0,8px,0);-moz-transform:translate3d(0,8px,0);-o-transform:translate3d(0,8px,0);-webkit-transform:translate3d(0,8px,0)}
.navimenu .menu-open:checked+.open-button .burger-1{transform:translate3d(0,0,0) rotate(45deg);-ms-transform:translate3d(0,0,0) rotate(45deg);-moz-transform:translate3d(0,0,0) rotate(45deg);-o-transform:translate3d(0,0,0) rotate(45deg);-webkit-transform:translate3d(0,0,0) rotate(45deg)}
.navimenu .menu-open:checked+.open-button .burger-2{transform:translate3d(0,0,0) scale(.1,1);-ms-transform:translate3d(0,0,0) scale(.1,1);-moz-transform:translate3d(0,0,0) scale(.1,1);-o-transform:translate3d(0,0,0) scale(.1,1);-webkit-transform:translate3d(0,0,0) scale(.1,1)}
.navimenu .menu-open:checked+.open-button .burger-3{transform:translate3d(0,0,0) rotate(-45deg);-ms-transform:translate3d(0,0,0) rotate(-45deg);-moz-transform:translate3d(0,0,0) rotate(-45deg);-webkit-transform:translate3d(0,0,0) rotate(-45deg);-o-transform:translate3d(0,0,0) rotate(-45deg)}
.navimenu .gooey-menu-item:hover{background-color:#4682b4;color:#00bcd4}
.navimenu .gooey-menu-item{transition-duration:180ms;-moz-transition-duration:180ms;-webkit-transition-duration:180ms;-o-transition-duration:180ms}
.navimenu .open-button{z-index:2;transition-timing-function:cubic-bezier(.175,.885,.32,1.275);-ms-transition-timing-function:cubic-bezier(.175,.885,.32,1.275);-moz-transition-timing-function:cubic-bezier(.175,.885,.32,1.275);-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.275);-o-transition-timing-function:cubic-bezier(.175,.885,.32,1.275);transition-duration:400ms;-ms-transition-duration:400ms;-o-transition-duration:400ms;-moz-transition-duration:400ms;-webkit-transition-duration:400ms;transform:scale(1.1,1.1) translate3d(0,0,0);-ms-transform:scale(1.1,1.1) translate3d(0,0,0);-o-transform:scale(1.1,1.1) translate3d(0,0,0);-moz-transform:scale(1.1,1.1) translate3d(0,0,0);-webkit-transform:scale(1.1,1.1) translate3d(0,0,0);cursor:pointer}
.navimenu .open-button:hover{transform:scale(1.2,1.2) translate3d(0,0,0);-ms-transform:scale(1.2,1.2) translate3d(0,0,0);-moz-transform:scale(1.2,1.2) translate3d(0,0,0);-o-transform:scale(1.2,1.2) translate3d(0,0,0);-webkit-transform:scale(1.2,1.2) translate3d(0,0,0)}
.navimenu .menu-open:checked+.open-button{transition:200ms linear;-ms-transition:200ms linear;-webkit-transition:200ms linear;-moz-transition:200ms linear;-o-transition:200ms linear;transform:scale(.9,.9) translate3d(0,0,0);-ms-transform:scale(.9,.9) translate3d(0,0,0);-o-transform:scale(.9,.9) translate3d(0,0,0);-webkit-transform:scale(.9,.9) translate3d(0,0,0);-moz-transform:scale(.9,.9) translate3d(0,0,0)}
CSS代码(livedemo.css):
html{width:100%;font-size:62.5%}
body{width:100%;background-color:#f6f8f9;font-family:Verdana,Geneva,sans-serif;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;margin-bottom:1em;margin-top:1em;color:#6a7989;}
h1{font-size:3em;color:#386890;}
h2{font-size:1.7em;}
p{color:#6a7989;font-size:1.1em;margin-top:.4em;font-weight:900;text-align:left;line-height:2em;}
i.desc{font-size:1.2em;line-height:1.1em;color:#768799;}
.bold{font-weight:500;color:#525e6b;}
.plugin-demo-header{text-align:center;margin:1em 2em 6em 2em;}
/*Sections*/
.feature{background-color:#3366cc;color:white;text-shadow:white 1px 1px;border-radius:100%;width:75px;height:75px;line-height:85px;vertical-align:baseline;text-align:center;position:relative;display:inline-block;}
.feature-desc{font-variant:small-caps;text-align:center;}
.section-cont{margin:0 auto;margin-top:3em;margin-bottom:1em;padding:1.5em;box-shadow:#cadee9 -1px 1px 10px;display:block;}
.feature-cont{text-align:center;}
.feature-cont p{margin-left:2em;margin-top:1em;}
.section-label{font-size:2em;color:#647883;font-weight:bold;font-variant:small-caps;margin-top:2em;margin-bottom:2em;}
#round{min-height:25em;}
#menu-v-example{min-height:40em;}
#docs{display:none;margin:auto;}
/*Menus*/
#gooey-upper .gooey-menu-item,#gooey-upper .open-button{left:50%;top:50%;}
#gooey-h .open-button,#gooey-h .gooey-menu-item{margin-top:4.2em;margin-left:.6em;}
#gooey-v .open-button,#gooey-v .gooey-menu-item{margin-top:30em;}
#gooey-round,#gooey-API{left:30%;top:50%;}
#gooey-round .open-button,#gooey-API .open-button,#gooey-round .gooey-menu-item,#gooey-API .gooey-menu-item{margin-top:6.5em;margin-left:3.2em;}
.fa.fa-angle-double-up{position:fixed;left:95%;bottom:0%;cursor:pointer;color:#748c99;}
/* Responsive styles */
@media screen and (min-device-width:320px) and (orientation:portrait){.fa.fa-angle-double-up{left:75%;}
}
@media screen and (min-width:320px) and (max-width:780px) and (orientation:landscape){.fa.fa-angle-double-up{left:89%;}
}
@media (max-width:780px){p{font-size:.9em;}
h1{font-size:2em;}
h2{font-size:1.3em;}
.code-example{margin-top:5em;}
#gooey-upper{margin:0;}
#gooey-upper .gooey-menu-item,#gooey-upper .open-button{left:44%;top:70%;}
#gooey-round .gooey-menu-item,#gooey-round .open-button{top:50%;}
#gooey-h .open-button,#gooey-h .gooey-menu-item{top:20%;left:20%;}
.round-example{min-height:20em;}
#gooey-v .open-button,#gooey-v .gooey-menu-item{margin-top:0;}
#gooey-v{margin-top:24em;}
.event-api-ex{min-height:23em;}
#gooey-API{margin-top:6em;}
.vertical-example{min-height:15em;}
#gooey-round,#gooey-API{top:30%;}
#gooey-round .open-button,#gooey-API .open-button,#gooey-round .gooey-menu-item,#gooey-API .gooey-menu-item{margin-top:3.5em;margin-left:3.2em;}
.gooeySVG{width:0;height:0;}
#gooey-h .open-button,#gooey-h .gooey-menu-item{margin-top:.8em;}
.prettyprint{font-size:.7em;}
.plugin-demo-header{margin:1em 2em 5em 2em;}
.feature{width:55px;height:55px;line-height:65px;}
.feature-desc{font-size:1em;}
.section-label{font-size:1.5em;margin-top:1em;}
#menu-v-example{min-height:35em;}
}
分享到QQ
分享到微博
微信扫一扫
