jquery侧边拉出式菜单特效代码

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

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

以下是 jquery侧边拉出式菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery侧边拉出式菜单</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/side-bar.js"></script>
<style>
/****************************************/

a{
	outline: none;
}

a:active{
	outline: none;
}

#sideBar{
text-align:left;
}

#sideBar h2{
	color:#FFFFFF;
	font-size:110%;
	font-family:arial;
	margin:10px 10px 10px 10px;
	font-weight:bold !important;
}

#sideBar h2 span{
	font-size:125%;
	font-weight:normal !important;
}

#sideBar ul{
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

#sideBar li{
	margin:0px 10px 3px 10px;
	padding:2px;
	list-style-type:none;
	display:block;
	background-color:#DA1074;
	width:177px;
	color:#FFFFFF;
}

#sideBar li a{
	width:100%;
}

#sideBar li a:link,
#sideBar li a:visited{
	color:#FFFFFF;
	font-family:verdana;
	font-size:100%;
	text-decoration:none;
	display:block;
	margin:0px 0px 0px 0px;
	padding:0px;
	width:100%;
}

#sideBar li a:hover{
	color:#FFFFFF;
	text-decoration:underline;
}

#sideBar{
	position: absolute;
	width: auto;
	height: auto;
	top: 140px;
	right:0px;
	background-image:url(images/background.gif);
	background-position:top left;
	background-repeat:repeat-y;
}

#sideBarTab{
	float:left;
	height:137px;
	width:28px;
}

#sideBarTab img{
	border:0px solid #FFFFFF;
}

#sideBarContents{
	float:left;
	overflow:hidden !important;
	width:200px;
	height:320px;
}

#sideBarContentsInner{
	width:200px;
}
</style>


</head>

<body>

<div id="sideBar">
	
	<a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar" /></a>
	
	<div id="sideBarContents" style="display:none;">
		<div id="sideBarContentsInner">
			<h2>side<span>bar</span></h2>
			
			<ul>
				<li><a href="#">Link One</a></li>
				<li><a href="#">Link Two</a></li>
				<li><a href="#">Link Three</a></li>
				<li><a href="#">Link Four</a></li>
				<li><a href="#">Link Five</a></li>
			</ul>
			
		</div>
	</div>
</div>
</body>
</html>

JS代码(side-bar.js):

var isExtended = 0;
	function slideSideBar(){
	new Effect.toggle('sideBarContents','blind',{
	scaleX:'true',scaleY:'true;
	',scaleContent:false}
);
	if(isExtended==0){
	$('sideBarTab').childNodes[0].src = $('sideBarTab').childNodes[0].src.replace(/(\.[^.]+)$/,'-active$1');
	new Effect.Fade('sideBarContents',{
	duration:1.0,from:0.0,to:1.0}
);
	isExtended++;
}
else{
	$('sideBarTab').childNodes[0].src = $('sideBarTab').childNodes[0].src.replace(/-active(\.[^.]+)$/,'$1');
	new Effect.Fade('sideBarContents',{
	duration:1.0,from:1.0,to:0.0}
);
	isExtended=0;
}
}
function init(){
	Event.observe('sideBarTab','click',slideSideBar,true);
}
Event.observe(window,'load',init,true);

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