以下是 Mac OS X桌面菜单jQuery特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<title>Mac OS X桌面菜单jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link rel="stylesheet" href="core/dockmenu.css">
<script src="core/jquery-1.10.2.min.js"></script>
<script src="core/dockmenu.min.js"></script>
<style>
html, body{ margin:0; padding:0; background: url(grey_wash_wall.png)}
.row label
{
color: #999;
margin: 0 0 5px 0;
padding: 0;
line-height: 30px;
font-size: 13px;
font-weight: normal;
}
.menu{ padding: 10px; background: #303030; position: absolute; top: 0; left: 0; color: #fff; width: 315px; }
.menu input, .menu select
{
background: rgba(0, 0, 0, 0.6);
border: 1px solid #FFF;
color: #FFF;
padding: 2px 5px;
width: 100px;
float: right;
margin-left: 10px;
}
.close
{
position: absolute;
right: -25px;
background: #303030;
width: 50px;
text-align: right;
padding: 2px 10px 3px 0;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper1').dockmenu({
buttons: [{
'title': 'Settings',
'href': '#settings',
'imgURL': 'icons/Settings.png',
'onClick': function(){
alert('You clicked on the Settings icon');
}
},{
'title': 'App Store',
'href': '#AppStore',
'imgURL': 'icons/AppStore.png',
},{
'title': 'Camera',
'href': '#camera',
'imgURL': 'icons/Camera.png',
},{
'title': 'Games',
'href': '#Games',
'imgURL': 'icons/Games.png',
},{
'title': 'Mail',
'href': '#Mail',
'imgURL': 'icons/Mail.png',
},{
'title': 'Music',
'href': '#Music',
'imgURL': 'icons/Music.png',
'onClick': function(){
alert('You clicked on the Music icon');
}
},{
'title': 'Safari',
'href': '#Safari',
'imgURL': 'icons/Safari.png',
},{
'title': 'Photos',
'href': '#Photos',
'imgURL': 'icons/Photos.png',
}]
});
$('.close').on('click', function()
{
if( $('.menu').position().left === 0 )
{
$('.menu').animate({'left':'-335px'}, 1000);
$(this).html('>');
}
else
{
$('.menu').animate({'left':'0'}, 1000);
$(this).html('x');
}
});
});
function recreate()
{
var width = $('#width').val(),
position = $('#position option:selected').val(),
menuposition = $('#menuposition option:selected').val(),
top = $('#top').val(),
bottom = $('#bottom').val(),
left = $('#left').val(),
right = $('#right').val(),
margin = $('#margin').val().split(','),
padding = $('#padding').val().split(','),
showBoard = $('#showBoard').val();
$('#wrapper1').empty();
$('#wrapper1').dockmenu({
width: width,
position: position,
menuPosition: menuposition,
top: top,
bottom: bottom,
left: left,
right: right,
margin: margin,
padding: padding,
showBoard: $('#showBoard').is(':checked'),
buttons: [{
'title': 'Settings',
'href': '#settings',
'imgURL': 'icons/Settings.png',
'onClick': function(){
alert('You clicked on the Settings icon');
}
},{
'title': 'App Store',
'href': '#AppStore',
'imgURL': 'icons/AppStore.png',
},{
'title': 'Camera',
'href': '#camera',
'imgURL': 'icons/Camera.png',
},{
'title': 'Games',
'href': '#Games',
'imgURL': 'icons/Games.png',
},{
'title': 'Mail',
'href': '#Mail',
'imgURL': 'icons/Mail.png',
},{
'title': 'Music',
'href': '#Music',
'imgURL': 'icons/Music.png',
'onClick': function(){
alert('You clicked on the Music icon');
}
},{
'title': 'Safari',
'href': '#Safari',
'imgURL': 'icons/Safari.png',
},{
'title': 'Photos',
'href': '#Photos',
'imgURL': 'icons/Photos.png',
}]
});
}
</script>
</head>
<body>
<div class="menu">
<div class="close">x</div>
<h3>Options</h3>
<div class="row">
<label for="position">Position:</label>
<select id="position">
<option value="fixed" selected="selected">fixed</option>
<option value="relative">relative</option>
<option value="absolute">absolute</option>
</select>
</div>
<div class="row">
<label for="menuposition">Menu Position:</label>
<select id="menuposition">
<option value="bottom" selected="selected">bottom</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
</div>
<div class="row"><label for="width">Width:</label><input type="text" id="width" value="100%"/></div>
<div class="row"><label for="top">Top:</label><input type="text" id="top" value="null"/></div>
<div class="row"><label for="right">Right:</label><input type="text" id="right" value="null"/></div>
<div class="row"><label for="bottom">Bottom:</label><input type="text" id="bottom" value="0"/></div>
<div class="row"><label for="left">Left:</label><input type="text" id="left" value="0"/></div>
<div class="row"><label for="margin">Margin: [top, right, bottom, left]</label> <input type="text" id="margin" value="0,0,10px,0"/></div>
<div class="row"><label for="padding">Padding: [top, right, bottom, left]</label> <input type="text" id="padding" value="0,3%,0,3%"/></div>
<div class="row"> <label for="showBoard">Show Board:</label> <input type="checkbox" checked="checked" id="showBoard"/></div>
<button onClick="recreate(); return false;">Show</button>
</div>
<div id="wrapper1"></div><!-- Dockmenu build wrapper1 -->
</body>
</html>
JS代码(dockmenu.min.js):
(function(e){
"use strict";
e.fn.dockmenu=function(t){
var n={
width:"100%",background:"#fff",position:"fixed",responsive:true,menuPosition:"bottom",top:"auto",bottom:0,left:0,right:"auto",margin:[0,0,10,0],padding:[0,"3%",0,"3%"],showBoard:true,autoHide:false,buttons:[{
}
]}
,r=e.extend({
}
,n,t),i=e(window),s=r.margin,o=r.padding,u=[],a=[],f=function(t){
if(t.type==="mouseenter"){
e(this).next().addClass("nearby");
e(this).prev().addClass("nearby");
e(this).find("span").toggle()}
else{
e("#dock-menu-list li").removeClass("nearby");
e(this).find("span").hide()}
}
;
return this.each(function(){
var t=e(this);
var n=r.menuPosition==="bottom"||r.menuPosition==="top"?"tb":"lr";
switch(e.type(s)){
case"number":u=[s,s,s,s];
break;
case"array":u=[s[0],s[1],s[2],s[3]];
break}
switch(e.type(o)){
case"number":a=[o,o,o,o];
break;
case"array":a=[o[0],o[1],o[2],o[3]];
break}
e("<div>").attr("id","dock-menu-wrapper").addClass(n).css({
position:r.position,top:r.top,bottom:r.bottom,right:r.right,left:r.left}
).appendTo(t);
var l=t.find("#dock-menu-wrapper");
e("<ul>").attr("id","dock-menu-list").appendTo(l);
var c=l.find("#dock-menu-list");
if(u.length>0){
e(l).css({
"margin-top":u[0],"margin-right":u[1],"margin-bottom":u[2],"margin-left":u[3]}
)}
if(a.length>0&&n==="tb"){
e(l).css({
"padding-top":a[0],"padding-right":a[1],"padding-bottom":a[2],"padding-left":a[3]}
)}
if(r.autoHide){
var h=null;
e(l).on("mouseleave",function(){
h=setTimeout(function(){
e(l).animate({
opacity:0,visibility:"hidden"}
,1e3)}
,5e3)}
).on("mouseenter",function(){
clearTimeout(h);
e(this).animate({
opacity:1}
,1e3)}
)}
e.each(r.buttons,function(t,n){
var r=function(){
e(this).effect("bounce",{
times:3}
,1500);
n.onClick();
return false}
;
e("<li>").append(e("<a>").attr("href",this.href).append(e("<span>").html(this.title)).append(e("<img/>").attr("src",this.imgURL))).bind("click",this.onClick?r:"").appendTo(c)}
);
if(n==="tb"){
e(l).width(r.width);
e(c).width(r.width)}
else{
var p=(e(i).height()-e(c).height())/2;
if(p>0){
e(c).css({
position:"absolute",top:p}
)}
if(r.menuPosition==="left"){
e(l).css({
left:0,right:"auto"}
)}
else{
e(l).css({
right:0,left:"auto"}
)}
}
if(r.showBoard&&n==="tb"){
e("<div>").addClass("menu-perspective").width(r.width).append(e("<div>").addClass("menu-board metal-gradient").css("min-width",e(c).find("li").length*e(c).find("li").width())).appendTo(l);
e(c).css("margin-bottom","-40px")}
else{
l.addClass("no-board")}
if((u.length||a.length)&&n==="tb"){
var d=e(l).outerWidth(true);
var v=100-Math.round((d-e(i).width())/e(i).width()*100,.5);
e(l).width(d>e(i).width()?v+"%":r.width)}
e(c).find("li").bind("mouseenter mouseleave",f)}
)}
}
)(jQuery)CSS代码(dockmenu.css):
/* === Clear and fix === */
#dock-menu-wrapper .clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden}
#dock-menu-wrapper .clearfix{zoom:1}
/* === General styles === */
#dock-menu-wrapper .hide{display:none;}
#dock-menu-wrapper .show{display:block;}
/* === Dockmenu wrapper === */
#dock-menu-wrapper li,#dock-menu-wrapper a,#dock-menu-wrapper a:focus,#dock-menu-wrapper a:visited,#dock-menu-wrapper a:link,#dock-menu-wrapper a:hover,#dock-menu-wrapper img{outline:none;}
#dock-menu-wrapper.tb{position:fixed;}
#dock-menu-wrapper.lr{top:0;width:100px;}
/* === Dockmenu perspective board === */
#dock-menu-wrapper .menu-perspective{-webkit-perspective:260;-moz-perspective:260;perspective:260px;}
#dock-menu-wrapper.lr .menu-perspective{display:none;}
/* === Dockmenu board === */
#dock-menu-wrapper.tb .menu-board{width:90%;height:50px;margin:0 5%;position:relative;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0px 7px 25px -7px rgba(0,0,0,.8);-mox-box-shadow:0px 7px 25px -7px rgba(0,0,0,.8);box-shadow:0px 7px 25px -7px rgba(0,0,0,.8);-webkit-transform:rotateX(27deg);-moz-transform:rotateX(27deg);transform:rotateX(27deg);}
/* === Dockmenu list styles (ul) === */
#dock-menu-wrapper.tb #dock-menu-list{width:100%;margin:0;padding:0px;position:relative;list-style:none;text-align:center;white-space:nowrap;display:inline-block;vertical-align:bottom;}
#dock-menu-wrapper.lr #dock-menu-list{width:100px;margin:0;padding:0px;position:relative;list-style:none;text-align:center;white-space:nowrap;display:inline-block;vertical-align:middle;}
#dock-menu-wrapper .no-board #dock-menu-list{margin:0;}
#dock-menu-wrapper.tb #dock-menu-list li{position:relative;z-index:10;display:inline-block;vertical-align:bottom;white-space:nowrap;overflow:visible;margin:0 3px;}
#dock-menu-wrapper.lr #dock-menu-list li{position:relative;z-index:10;vertical-align:middle;white-space:nowrap;overflow:visible;margin:0 3px;}
#dock-menu-wrapper.tb #dock-menu-list .ui-effects-wrapper{width:106px;height:96px;display:inline-block;float:left;}
#dock-menu-wrapper.tb #dock-menu-list li a{width:64px;height:116px;position:relative;display:inline-block;vertical-align:bottom;text-decoration:none;white-space:normal;letter-spacing:normal;color:#000;text-align:center;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
#dock-menu-wrapper.lr #dock-menu-list li a{width:64px;height:74px;position:relative;display:inline-block;text-decoration:none;white-space:normal;letter-spacing:normal;color:#000;text-align:center;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
#dock-menu-wrapper #dock-menu-list li a:hover,#dock-menu-wrapper #dock-menu-list .ui-effects-wrapper li a{width:96px;height:96px;margin-bottom:10px;}
#dock-menu-wrapper #dock-menu-list li a img{width:100%;height:auto;position:absolute;left:0px;bottom:10px;text-align:center;border:0px none;/* margin-bottom:15px;*/
-webkit-box-reflect:below 0 -webkit-linear-gradient(top,transparent 70%,rgba(255,255,255,.1) 85%,rgba(0,0,0,.4) 100%);}
#dock-menu-wrapper #dock-menu-list li a:hover span:after{display:block;height:9px;width:100%;background:rgba(0,0,0,0) url("../icons/span.png") 50% 0 no-repeat;position:absolute;right:0;content:"";text-align:center;margin:0;padding:0;}
#dock-menu-wrapper.tb #dock-menu-list .nearby a,#dock-menu-wrapper.lr #dock-menu-list .nearby a{width:82px;height:82px;}
#dock-menu-wrapper #dock-menu-list li span{position:relative;line-height:1.3em;display:none;text-align:center;font-weight:bold;font-size:80%;padding:4px 12px;background-color:#ccc;margin:0px auto;top:-50px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;white-space:nowrap;}
/* === Dockmenu board metal effect background === */
#dock-menu-wrapper .metal-gradient{background:-webkit-radial-gradient(center,circle farthest-corner,rgba(255,255,255,0) 50%,rgba(200,200,200,1)),-webkit-radial-gradient(center,circle,rgba(255,255,255,.35),rgba(255,255,255,0) 20%,rgba(255,255,255,0) 21%),-webkit-radial-gradient(center,circle,rgba(0,0,0,.2),rgba(0,0,0,0) 20%,rgba(0,0,0,0) 21%),-webkit-radial-gradient(center,circle farthest-corner,#f0f0f0,#c0c0c0);background:-moz-radial-gradient(center,circle farthest-corner,rgba(255,255,255,0) 50%,rgba(200,200,200,1)),-moz-radial-gradient(center,circle,rgba(255,255,255,.35),rgba(255,255,255,0) 20%,rgba(255,255,255,0) 21%),-moz-radial-gradient(center,circle,rgba(0,0,0,.2),rgba(0,0,0,0) 20%,rgba(0,0,0,0) 21%),-moz-radial-gradient(center,circle farthest-corner,#f0f0f0,#c0c0c0);background:-ms-radial-gradient(center,circle farthest-corner,rgba(255,255,255,0) 50%,rgba(200,200,200,1)),-ms-radial-gradient(center,circle,rgba(255,255,255,.35),rgba(255,255,255,0) 20%,rgba(255,255,255,0) 21%),-ms-radial-gradient(center,circle,rgba(0,0,0,.2),rgba(0,0,0,0) 20%,rgba(0,0,0,0) 21%),-ms-radial-gradient(center,circle farthest-corner,#f0f0f0,#c0c0c0);}
分享到QQ
分享到微博
微信扫一扫
