蓝色清爽可用做排行的侧边列表滑动门代码

代码简介:

一个很节省布局的侧边滑动门,一般用作阅读排行或下载排行,清新风格,没有用到任何的修饰图片,直接拷贝到你的网页里就可以用啦。这还支持多内容切换,也就是可以复制多个门单元以适应需要。

代码内容:

<!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">
<html>
<head>
<title>蓝色清爽可用做排行的侧边列表滑动门代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
body{font-size:12px;}
a:link,a:visited{font-size:12px;color:#666;text-decoration:none;}
a:hover{color:#ff0000;text-decoration:underline;}
#Tab{margin:0 auto;220px;border:1px solid #BCE2F3;}
.Menubox{height:28px;border-bottom:1px solid #64B8E4;background:#E4F2FB;}
.Menubox ul{list-style:none;margin:7px 40px;padding:0;position:absolute;}
.Menubox ul li{float:left;background:#64B8E4;line-height:20px;display:block;cursor:pointer;65px;text-align:center;color:#fff;font-

weight:bold;border-top:1px solid #64B8E4;border-left:1px solid #64B8E4;border-right:1px solid #64B8E4;}
.Menubox ul li.hover{background:#fff;border-bottom:1px solid #fff;color:#147AB8;}
.Contentbox{clear:both;margin-top:0px;border-top:none;height:181px;padding-top:8px;height:100%;}
.Contentbox ul{list-style:none;margin:7px;padding:0;}
.Contentbox ul li{line-height:24px;border-bottom:1px dotted #ccc;}
</style>
<script>
<!--
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
</head>
<body>
<br><br>
<div id="Tab">
  <div class="Menubox">
    <ul>
      <li id="menu1" onmouseover="setTab('menu',1,2)" class="hover">最新更新</li>
      <li id="menu2" onmouseover="setTab('menu',2,2)" >下载排行</li>
    </ul>
  </div>
  <div class="Contentbox"> 
    <div id="con_menu_1" class="hover">
      <ul>
        <li><a href="/" target="_blank">VB获取数据表名称的一个实例</a></li><li><a href="/" target="_blank">ASP+jQuery无刷新读写数据库操作

</a></li><li><a href="/" target="_blank">VC仿QQ游戏大厅的树型展开菜单控件</a></li><li><a href="http://www.webdm.cn" target="_blank">jQuery浮动层

图片展示特效</a></li><li><a href="/" target="_blank">xhEditor网页编辑器</a></li><li><a href="/" target="_blank">轩溪ASP生成HTML下载系统 

v3.81</a></li><li><a href="/" target="_blank">VB6商品出租管理系统完整源代码</a></li>
      </ul>
    </div>
    <div id="con_menu_2" style="display:none">
      <ul>
        <li><a href="http://www.webdm.cn" target="_blank">VB仿Unix红帽操作系统界面源码</a></li><li><a href="/" target="_blank">Java企业人事管理系

统源码</a></li><li><a href="/" target="_blank">jQuery 动态添加层、拖动层实例</a></li><li><a href="/" target="_blank">Java根据数字报语音的程序

</a></li><li><a href="/" target="_blank">listview控件自定义扩展VB版</a></li><li><a href="/" target="_blank">《深入MIDP2.0工具类别》指导书

</a></li><li><a href="/" target="_blank">《MIDP 图形编程简介》 PDF</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!

代码来自:http://www.webdm.cn/webcode/bb9a5d1a-4255-47c4-b1c3-9e82697050d1.html

原文地址:https://www.cnblogs.com/webdm/p/1976855.html