兼容性超好的CSS滑动门

代码简介:兼容性好的CSS没去门,其实这里还是要用到JS来配合,不过相对其它的滑动门菜单,本没去门将代码做到了最简化,而且兼容性也不错,因此这是本菜单的亮点,从外观上来说,它和其它的没去门没有大的区别,但愿这正是你需要的。

代码内容:

<title>兼容性超好的CSS滑动门 _网页代码站(www.webdm.cn)</title>
<STYLE type=text/css media=screen> 
<!-- 
*{font-size:12px;} 
UL{list-style-type:none; margin:0px;} 
/* www.webdm.cn */ 
.ttl{height:18px;} 
.ctt{height:auto;padding:6px;clear:both} 
.w936{100%;margin:2px 0;clear:both;border:1px solid skyblue} 
/* www.webdm.cn */ 
/* TAB 切换效果 */ 
.tb_{background-color: #E6F2FF; background-image: url('http://www.webdm.cn/images/20090912/glossyback.gif'); background-repeat: repeat-x;} 
.tb_ ul{height:24px;} 
.tb_ li{float:left;height: 24px;padding-top: 6px; 94px;cursor:pointer;} 
.normaltab    { background-image:url('http://www.webdm.cn/images/20090912/glossyback.gif'); background-repeat: no-repeat; color:#1F3A87 ;} 
.hovertab     { background-image: url('http://www.webdm.cn/images/20090912/glossyback2.gif');  color:#1F3A87; font-weight:bold } 
.dis{display:block;} 
.undis{display:none;} 
--> 
</STYLE>

<SCRIPT language=javascript type=text/javascript> 
<!-- 
function g(o){return document.getElementById(o);} 
function HoverLi(n){ 
//N个标签,就将i<=N; 
; 
for(var i=1;i<=4;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g

('tb_'+n).className='hovertab'; 
} 
//--> 
</SCRIPT>

<DIV class=w936>
<DIV class=tb_ id=tb_>
<UL>
<LI class=hovertab id=tb_1 onmouseover=xgz:HoverLi(1);>网页代码站</LI>
<LI class=normaltab id=tb_2 onmouseover=xgz:HoverLi(2);>网页特效</LI>
<LI class=normaltab id=tb_3 onmouseover=xgz:HoverLi(3);>代码下载</LI>
<LI class=normaltab id=tb_4 onmouseover=xgz:HoverLi(4);>分类导航</LI>
</UL></DIV>
<DIV class=ctt>
<DIV class=dis id=tbc_01>网页代码站就是(<a href="/">WebDm.cn</a>),提供精品源码、JavaScript/CSS特效代码下载等。</DIV>
<DIV class=undis id=tbc_02>网页特效,收录精品的网页代码</DIV>
<DIV class=undis id=tbc_03>学习型源代码下载</DIV>
<DIV class=undis id=tbc_04>分类</DIV>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!

代码来自:http://www.webdm.cn/webcode/11cabbc9-1ded-4d99-a7aa-a8432b4946a0.html

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