这么简单就实现了CSS滑动菜单（滑动门）

2024-09-05 12:20:25

字体：大中小

来源：转载

供稿：网友

一个简单方法实现了CSS滑动门菜单，正研究滑动门的朋友请关注一下，这个代码可以让你了解滑动门的实现过程，没有用什么复杂的方法，只用简单配合JS，就完成了一个流行的滑动导航。

<html><head><title>如此简单就实现了CSS滑动门</title><style type="text/css">*{font-size:9pt;} ul li { list-style: none; } ul, li { margin: 0; padding: 0;}.tabs,.tabs_act{float:left;width:103px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;height:25px;text-align:center;line-height:25px;display:block;}.tabs_act{font-weight:bold;color:#FC7404;border-bottom:1px solid #fff;background-image:url(/jscss/demoimg/200904/bgOFF4.gif)}.Sliding_tab{width:513px;border-left:1px solid #ccc;height:27px;} .Sliding_tab li{float:left;border-top:1px solid #ccc;}.Sliding_tab li.table_li{border-bottom:1px solid #ccc;border-top:0px;width:305px;height:26px;line-height:26px;}.tablist { clear:both; width:513px;border:1px solid #ccc;border-top:0px;height:300px;overflow:hidden;}</style><SCRIPT language=javascript type=text/javascript>    function g(o){return document.getElementById(o);}       function Hovertab(num,counts,tabname,tabclass){          for (i=1;i<=counts;i++)          {              g(tabname+'tab0'+i).className=tabclass+'tabs';              g(tabname+'div0'+i).style.display='none';          }              g(tabname+'tab0'+num).className=tabclass+'tabs_act';              g(tabname+'div0'+num).style.display='block';      }   </SCRIPT> </HEAD><BODY> <div style=" width:513px; float:left; clear:both;"><DIV class="Sliding_tab"><UL> <LI>CSS</LI><LI>AJAX </LI><LI class="table_li"></LI></UL></DIV><DIV class=tablist id=set_div01>CSS内容</DIV><DIV class=tablist id=set_div02 style="DISPLAY: none">AJAX内容</DIV></div></BODY></HTML>

上一篇：兼容IE各版本的纯CSS二级下拉菜单

下一篇：jQuery选项卡实战示例

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注