代码简介：位于网页右侧基于MooTools框架的边栏平滑菜单效果
代码内容：
<!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>
<title>位于网页右侧基于MooTools框架的边栏平滑菜单效果_网页代码站(www.webdm.cn)</title>
<script type="text/javascript" src="http://www.webdm.cn/images/20100918/prototype.js"></script>
<script type="text/javascript" src="http://www.webdm.cn/images/20100918/effects.js"></script>
<script type="text/javascript" src="http://www.webdm.cn/images/20100918/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;
177px;
color:#FFFFFF;
}
#sideBar li a{
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;
100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: absolute;
auto;
height: auto;
top: 140px;
right:0px;
background-image:url(http://www.webdm.cn/images/20100918/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
200px;
height:320px;
}
#sideBarContentsInner{
200px;
}
</style>
</head>
<body>
<div id="sideBar">
<a href="#" id="sideBarTab"><img src="http://www.webdm.cn/images/20100918/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="http://www.webdm.cn/" target="_blank">Link One</a></li>
<li><a href="http://www.webdm.cn/" target="_blank">Link Two</a></li>
<li><a href="http://www.webdm.cn/" target="_blank">Link Three</a></li>
<li><a href="http://www.webdm.cn/" target="_blank">Link Four</a></li>
<li><a href="http://www.webdm.cn/" target="_blank">Link Five</a></li>
</ul>
</div>
</div>
</div>
<p align="center"></p>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/ee76bb67-5ed6-43d3-a7c7-c16f85d9709c.html