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" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery苹果风格手风琴菜单，属于站长常用代码" />
<title>jQuery苹果风格手风琴菜单</title>
<link rel="stylesheet" href="css/lrtk.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="http://www.baidu.com">All Categories</a></li>
			<li id="sn-aperture"><a href="http://www.baidu.com">Aperture</a></li>
			<li id="sn-apple"><a href="http://www.baidu.com">Apple</a></li>
			<li id="sn-audio"><a href="http://www.baidu.com">Audio</a></li>
			<li id="sn-audio"><a href="http://www.baidu.com">Chat</a></li>
			<li id="sn-audio"><a href="http://www.baidu.com">Final cut studio</a></li>
			<li id="sn-audio"><a href="http://www.baidu.com">Learning</a></li>
			<li id="sn-audio"><a href="http://www.baidu.com">System/Disk Utilities</a></li>
			<li id="sn-audio"><a href="http://www.baidu.com">Internet Utilities</a></li>
			<li id="sn-audio"><a href="http://www.baidu.com">Development Tools</a></li>
			<li id="sn-audio"><a href="http://www.baidu.com">Widgets</a></li>
			<li id="sn-audio"><a href="http://www.baidu.com">Video</a></li>
			<li id="sn-audio"><a href="http://www.baidu.com">Business &amp; Finance</a></li>
			<li id="sn-audio"><a href="http://www.baidu.com">iPod + iTunes</a></li>
		</ul>
	</li>
	<li class="drawer">
		<h2 class="drawer-handle">Top Downloads</h2>
		<ul>
			<li><a title="iTunes 7.5" href="http://www.baidu.com">1. iTunes 7.5</a></li>
			<li><a title="QuickTime 7.3.1" href="http://www.baidu.com">2. QuickTime 7.3.1</a></li>
			<li><a title="Safari 3 Public Beta" href="http://www.baidu.com">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="http://www.baidu.com">1. iTunes 7.5</a></li>
			<li><a title="QuickTime 7.3.1" href="http://www.baidu.com">2. QuickTime 7.3.1</a></li>
			<li><a title="Safari 3 Public Beta" href="http://www.baidu.com">3. Safari 3 Public Beta</a></li>
			<li><a title="Mac OS X 10.5.1 Update" href="http://www.baidu.com">4. Mac OS X 10.5.1 Up…</a></li>
			<li><a title="Java for Mac OS X 10.4 Release 5" href="http://www.baidu.com">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.accordion.js):

/* * Accordion 1.5 - jQuery menu widget * * Copyright (c) 2007 Jörn Zaefferer,Frank Marcia * * http://bassistance.de/jquery-plugins/jquery-plugin-accordion/ * * Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * Revision:$Id:jquery.accordion.js 4137 2007-12-13 12:37:58Z joern.zaefferer $ * */
(function($){
	$.ui = $.ui ||{
}
;
	$.ui.accordion ={
}
;
	$.extend($.ui.accordion,{
	defaults:{
	selectedClass:"selected",alwaysOpen:true,animated:'slide',event:"click",header:"a",autoheight:true}
,animations:{
	slide:function(settings,additions){
	settings = $.extend({
	easing:"swing",duration:300}
,settings,additions);
	if ( !settings.toHide.size() ){
	settings.toShow.animate({
	height:"show"}
,settings);
	return;
}
var hideHeight = settings.toHide.height(),showHeight = settings.toShow.height(),difference = showHeight / hideHeight;
	settings.toShow.css({
	height:0,overflow:'hidden'}
).show();
	settings.toHide.filter(":hidden").each(settings.complete).end().filter(":visible").animate({
	height:"hide"}
,{
	step:function(now){
	settings.toShow.height((hideHeight - (now)) * difference );
}
,duration:settings.duration,easing:settings.easing,complete:settings.complete}
);
}
,bounceslide:function(settings){
	this.slide(settings,{
	easing:settings.down ? "bounceout":"swing",duration:settings.down ? 1000:200}
);
}
,easeslide:function(settings){
	this.slide(settings,{
	easing:"easeinout",duration:700}
)}
}
}
);
	$.fn.extend({
	accordion:function(settings){
	if ( !this.length )return this;
	// setup configurationsettings = $.extend({
}
,$.ui.accordion.defaults,settings);
	if ( settings.navigation ){
	var current = this.find("a").filter(function(){
	return this.href == location.href;
}
);
	if ( current.length ){
	if ( current.filter(settings.header).length ){
	settings.active = current;
}
else{
	settings.active = current.parent().parent().prev();
	current.addClass("current");
}
}
}
// calculate active if not specified,using the first headervar container = this,headers = container.find(settings.header),active = findActive(settings.active),running = 0;
	if ( settings.fillSpace ){
	var maxHeight = this.parent().height();
	headers.each(function(){
	maxHeight -= $(this).outerHeight();
}
);
	var maxPadding = 0;
	headers.next().each(function(){
	maxPadding = Math.max(maxPadding,$(this).innerHeight() - $(this).height());
}
).height(maxHeight - maxPadding);
}
else if ( settings.autoheight ){
	var maxHeight = 0;
	headers.next().each(function(){
	maxHeight = Math.max(maxHeight,$(this).outerHeight());
}
).height(maxHeight);
}
headers.not(active || "").next().hide();
	active.parent().andSelf().addClass(settings.selectedClass);
	function findActive(selector){
	return selector != undefined? typeof selector == "number"? headers.filter(":eq(" + selector + ")"):headers.not(headers.not(selector)):selector === false? $("<div>"):headers.filter(":eq(0)");
}
function toggle(toShow,toHide,data,clickedActive,down){
	var complete = function(cancel){
	running = cancel ? 0:--running;
	if ( running )return;
	if ( settings.clearStyle ){
	toShow.add(toHide).css({
	height:"",overflow:""}
);
}
// trigger custom change eventcontainer.trigger("change",data);
}
;
	// count elements to animaterunning = toHide.size() == 0 ? toShow.size():toHide.size();
	if ( settings.animated ){
	if ( !settings.alwaysOpen && clickedActive ){
	toShow.slideToggle(settings.animated);
	complete(true);
}
else{
	$.ui.accordion.animations[settings.animated]({
	toShow:toShow,toHide:toHide,complete:complete,down:down}
);
}
}
else{
	if ( !settings.alwaysOpen && clickedActive ){
	toShow.toggle();
}
else{
	toHide.hide();
	toShow.show();
}
complete(true);
}
}
function clickHandler(event){
	// called only when using activate(false) to close all parts programmaticallyif ( !event.target && !settings.alwaysOpen ){
	active.parent().andSelf().toggleClass(settings.selectedClass);
	var toHide = active.next();
	var toShow = active = $([]);
	toggle( toShow,toHide );
	return false;
}
// get the click targetvar clicked = $(event.target);
	// due to the event delegation model,we have to check if one// of the parent elements is our actual header,and find thatif ( clicked.parents(settings.header).length )while ( !clicked.is(settings.header) )clicked = clicked.parent();
	var clickedActive = clicked[0] == active[0];
	// if animations are still active,or the active header is the target,ignore clickif(running || (settings.alwaysOpen && clickedActive) || !clicked.is(settings.header))return false;
	// switch classesactive.parent().andSelf().toggleClass(settings.selectedClass);
	if ( !clickedActive ){
	clicked.parent().andSelf().addClass(settings.selectedClass);
}
// find elements to show and hidevar toShow = clicked.next(),toHide = active.next(),data = [clicked,active,toShow,toHide],down = headers.index( active[0] ) > headers.index( clicked[0] );
	active = clickedActive ? $([]):clicked;
	toggle( toShow,toHide,data,clickedActive,down );
	return false;
}
;
	function activateHandler(event,index){
	// IE manages to call activateHandler on normal clicksif ( arguments.length == 1 )return;
	// call clickHandler with custom eventclickHandler({
	target:findActive(index)[0]}
);
}
;
	return container.bind(settings.event || "",clickHandler).bind("activate",activateHandler);
}
,activate:function(index){
	return this.trigger('activate',[index]);
}
,unaccordion:function(){
	return this.find("*").andSelf().unbind().end().end();
}
}
);
}
)(jQuery);

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代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
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;}

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