兼容性超好的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{width: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;width: 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