滑动伸缩的侧边栏菜单带缓冲效果

发布时间：2018-08-20 05:20:40 所属栏目：政策来源：站长网

导读：滑动伸缩的侧边栏菜单，带缓冲效果，而作者给这款侧边栏起了一个更好听的名字：性感的滑动型菜单，国人的技术是无可厚非的，老外肯定没的比，但是我们不能骄傲，国外免费的东西不拿白不拿，看看效果吧： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Trans

　　滑动伸缩的侧边栏菜单，带缓冲效果，而作者给这款侧边栏起了一个更好听的名字：性感的滑动型菜单，国人的技术是无可厚非的，老外肯定没的比，但是我们不能骄傲，国外免费的东西不拿白不拿，看看效果吧：

<!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=GBK" /> <title>Sliding Side Bar - Liehuo.Net</title> <style media="all" type="text/css"> body{ position:relative; paddign:0px; font-size:100%; } h2{ color:#FFFFFF; font-size:90%; font-family:arial; margin:10px 10px 10px 10px; font-weight:bold; } h2 span{ font-size:105%; font-weight:normal; } ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; } li{ margin:0px 10px 3px 10px; padding:2px; list-style-type:none; display:block; background-color:#DA1074; width:177px; } li a{ width:100%; } li a:link, li a:visited{ color:#FFFFFF; font-family:verdana; font-size:70%; text-decoration:none; display:block; margin:0px 0px 0px 0px; padding:0px; width:100%; } li a:hover{ color:#FFFFFF; text-decoration:underline; } #sideBar{ position: absolute; width: auto; height: auto; top: 200px; right:-7px; background-image:url(http://www.veryhuo.com/uploads/allimg/091220/sidebar/background.gif); background-position:top left; background-repeat:repeat-y; } #sideBarTab{ float:left; height:137px; width:28px; } #sideBarTab img{ border:0px solid #FFFFFF; } #sideBarContents{ overflow:hidden !important; } #sideBarContentsInner{ width:200px; } </style> <script type="text/javascript" src="http://www.veryhuo.com/uploads/allimg/091220/sidebar/mootools.js"></script> <script type="text/javascript" src="http://www.veryhuo.com/uploads/allimg/091220/sidebar/side-bar.js"></script> </head> <body> <div id="sideBar"> <a href="#" id="sideBarTab"><img src="http://www.veryhuo.com/uploads/allimg/091220/sidebar/slide-button.gif" alt="sideBar" title="sideBar" /></a> <div id="sideBarContents" style="width:0px;"> <div id="sideBarContentsInner"> <h2>侧边栏</h2> <ul> <li><a href="http://www.veryhuo.com/">烈火首页</a></li> <li><a href="http://www.liehuo.org/">网址导航</a></li> <li><a href="http://bbs.liehuo.net/">站长论坛</a></li> <li><a href="http://tool.liehuo.net/">网站工具</a></li> <li><a href="http://www.veryhuo.com/wap.php">WAP手机</a></li> <li><a href="http://alexa.liehuo.net/">网站工具</a></li> </ul> </div> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：南京站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

滑动伸缩的侧边栏菜单 带缓冲效果

滑动伸缩的侧边栏菜单带缓冲效果