jQuery苹果风格手风琴菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery苹果风格手风琴菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery苹果风格手风琴菜单</title>
<link rel="stylesheet" href="css/zzsc.css" type="text/css" media="screen" charset="gb2312" />
</head>
<base target="_blank">
<body>
<!-- 代码 开始 -->
<div class="drawers-wrapper">
<div class="boxcap captop"></div>
<ul class="drawers">
	<li class="drawer">
		<h2 class="drawer-handle open">Downloads</h2>
		<ul>
			<li id="sn-downloadsmacosx"><a href="#">All Categories</a></li>
			<li id="sn-aperture"><a href="#">Aperture</a></li>
			<li id="sn-apple"><a href="#">Apple</a></li>
			<li id="sn-audio"><a href="#">Audio</a></li>
			<li id="sn-audio"><a href="#">Chat</a></li>
			<li id="sn-audio"><a href="#">Final cut studio</a></li>
			<li id="sn-audio"><a href="#">Learning</a></li>
			<li id="sn-audio"><a href="#">System/Disk Utilities</a></li>
			<li id="sn-audio"><a href="#">Internet Utilities</a></li>
			<li id="sn-audio"><a href="#">Development Tools</a></li>
			<li id="sn-audio"><a href="#">Widgets</a></li>
			<li id="sn-audio"><a href="#">Video</a></li>
			<li id="sn-audio"><a href="#">Business &amp; Finance</a></li>
			<li id="sn-audio"><a href="#">iPod + iTunes</a></li>
		</ul>
	</li>
	<li class="drawer">
		<h2 class="drawer-handle">Top Downloads</h2>
		<ul>
			<li><a title="iTunes 7.5" href="#">1. iTunes 7.5</a></li>
			<li><a title="QuickTime 7.3.1" href="#">2. QuickTime 7.3.1</a></li>
			<li><a title="Safari 3 Public Beta" href="#">3. Safari 3 Public Beta</a></li>
		</ul>
	</li>
	<li class="drawer last">
		<h2 class="drawer-handle">Top Apple Downloads</h2>
		<ul>
			<li><a title="iTunes 7.5" href="#">1. iTunes 7.5</a></li>
			<li><a title="QuickTime 7.3.1" href="#">2. QuickTime 7.3.1</a></li>
			<li><a title="Safari 3 Public Beta" href="#">3. Safari 3 Public Beta</a></li>
			<li><a title="Mac OS X 10.5.1 Update" href="#">4. Mac OS X 10.5.1 Up…</a></li>
			<li><a title="Java for Mac OS X 10.4 Release 5" href="#">5. Java for Mac OS X …</a></li>
		</ul>
	</li>
</ul>
<div class="boxcap"></div>
</div>
<script src="js/jquery-1.2.1.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script src="js/jquery.accordion.js" type="text/javascript"></script>
<script src="js/appleslide.js" type="text/javascript"></script>
<!-- 代码 结束 -->
<style type="text/css" media="screen">
/* 非必要的样式 只是为了居中显示菜单 */
.drawers-wrapper{margin-left:auto;margin-right:auto;}
</style>
</body>
</html>

JS代码(appleslide.js):

$(function (){
	$('ul.drawers').accordion({
	header:'H2.drawer-handle',selectedClass:'open',event:'mouseover'}
);
}
);

JS代码(jquery.dimensions.js):

/* Copyright (c) 2007 Paul Bakaus (paul.bakaus@googlemail.com) and Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net) * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * * $LastChangedDate:2007-10-06 20:11:15 +0200 (Sa,06 Okt 2007) $ * $Rev:3581 $ * * Version:@VERSION * * Requires:jQuery 1.2+ */
(function($){
	$.dimensions ={
	version:'@VERSION'}
;
	// Create innerHeight,innerWidth,outerHeight and outerWidth methods$.each( [ 'Height','Width' ],function(i,name){
	// innerHeight and innerWidth$.fn[ 'inner' + name ] = function(){
	if (!this[0]) return;
	var torl = name == 'Height' ? 'Top':'Left',// top or left borr = name == 'Height' ? 'Bottom':'Right';
	// bottom or rightreturn num( this,name.toLowerCase() ) + num(this,'padding' + torl) + num(this,'padding' + borr);
}
;
	// outerHeight and outerWidth$.fn[ 'outer' + name ] = function(options){
	if (!this[0]) return;
	var torl = name == 'Height' ? 'Top':'Left',// top or left borr = name == 'Height' ? 'Bottom':'Right';
	// bottom or rightoptions = $.extend({
	margin:false}
,options ||{
}
);
	return num( this,name.toLowerCase() )+ num(this,'border' + torl + 'Width') + num(this,'border' + borr + 'Width')+ num(this,'padding' + torl) + num(this,'padding' + borr)+ (options.margin ? (num(this,'margin' + torl) + num(this,'margin' + borr)):0);
}
;
}
);
	// Create scrollLeft and scrollTop methods$.each( ['Left','Top'],function(i,name){
	$.fn[ 'scroll' + name ] = function(val){
	if (!this[0]) return;
	return val != undefined ?// Set the scroll offsetthis.each(function(){
	this == window || this == document ?window.scrollTo(name == 'Left' ? val:$(window)[ 'scrollLeft' ](),name == 'Top' ? val:$(window)[ 'scrollTop' ]()):this[ 'scroll' + name ] = val;
}
):// Return the scroll offsetthis[0] == window || this[0] == document ?self[ (name == 'Left' ? 'pageXOffset':'pageYOffset') ] ||$.boxModel && document.documentElement[ 'scroll' + name ] ||document.body[ 'scroll' + name ]:this[0][ 'scroll' + name ];
}
;
}
);
	$.fn.extend({
	position:function(){
	var left = 0,top = 0,elem = this[0],offset,parentOffset,offsetParent,results;
	if (elem){
	// Get *real* offsetParentoffsetParent = this.offsetParent();
	// Get correct offsetsoffset = this.offset();
	parentOffset = offsetParent.offset();
	// Subtract element marginsoffset.top -= num(elem,'marginTop');
	offset.left -= num(elem,'marginLeft');
	// Add offsetParent bordersparentOffset.top += num(offsetParent,'borderTopWidth');
	parentOffset.left += num(offsetParent,'borderLeftWidth');
	// Subtract the two offsetsresults ={
	top:offset.top - parentOffset.top,left:offset.left - parentOffset.left}
;
}
return results;
}
,offsetParent:function(){
	var offsetParent = this[0].offsetParent;
	while ( offsetParent && (!/^body|html$/i.test(offsetParent.tagName) && $.css(offsetParent,'position') == 'static') )offsetParent = offsetParent.offsetParent;
	return $(offsetParent);
}
}
);
	function num(el,prop){
	return parseInt($.css(el.jquery?el[0]:el,prop))||0;
}
;
}
)(jQuery);

CSS代码(zzsc.css):

DIV.container{margin:auto;width:90%;margin-bottom:10px;}
h2{margin:0;}
.drawers-wrapper{position:relative;width:188px;}
.drawer{background:transparent url(../images/sideboxlight_bg.gif) repeat-y scroll 0pt;color:#76797C;font-size:11px;line-height:1.3em;}
.boxcap{height:5px;left:0pt;position:absolute;width:100%;z-index:100;background:transparent url(../images/sidenav_capbottom.png) no-repeat scroll 0%;margin-top:-5px;}
.captop{background-image:url(../images/box_188captop.png);bottom:auto;top:0pt;margin-top:0;}
.drawers{margin-bottom:15px;color:#76797C;font-size:11px;line-height:18px;}
.drawers A{color:#666666;text-decoration:none;font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;font-size-adjust:none;font-style:normal;font-variant:normal;font-weight:normal;}
.drawer li{border-bottom:1px solid #E5E5E5;line-height:16px;padding:6px 0pt;}
UL{list-style:none;padding:0;}
UL.drawers{margin:0;}
.drawer-handle{background:#939393 url(../images/slider_handlebg188.png) no-repeat scroll 0pt;color:#333333;cursor:default;font-size:12px;font-weight:normal;height:25px;line-height:25px;margin-bottom:0pt;text-indent:15px;width:100%;}
.drawer-handle.open{background-color:#72839D;background-position:-188px 0pt;color:#FFFFFF;}
.drawer UL{padding:0 12px;padding-bottom:0pt;}
.drawer-content UL{padding-top:7px;}
.drawer-content LI A{display:block;overflow:hidden;}
.alldownloads li{border:0pt none;line-height:18px;padding:0pt;}

附件:下载该文件资源,减少时间成本(增值服务)