代码简介:位于网页右侧基于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