css滑動門菜單相容多瀏覽器

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

代碼如下

複製代碼

<title>一款相容性非常好的css滑動門菜單</title>
<style type=text/css media=screen>

</style>
<script language=網頁特效 type=text/javascript>

</script>
<div class=w936>
<div class=tb_ id=tb_>
<ul>
<li class=hovertab id=tb_1 onmouseo教程ver=xgz:hoverli(1);>111cn.net</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="http://">網頁.特效</a>
<a href="http://">源碼.下載</a>
<a href="#">seo.最佳化</a>
<a href="#">免費.空間</a>
<a href="http://">交換.連結</a></div>
<div class=undis id=tbc_02><a href="#" title="">菜單導航特效</a>
<a href="#" title="">圖層樣式特效</a>
<a href="#" title="">連結文本特效</a>
<a href="#" title="">圖形映像特效</a>
<a href="#" title="">滑鼠特效.代碼</a>
<a href="#" title="">頁面視窗特效</a>
<a href="#" title="">網頁背景特效</a>
<a href="#" title="">日期時間特效</a></div>
<div class=undis id=tbc_03><a href="http://" title="">淘客源碼下載</a>
<a href="http://" title="">cms系統源碼</a>
<a href="http://" title="">seo工具軟體</a></div>
<div class=undis id=tbc_04><a href="http://links.111cn.net/">友情連結交換平台</a>
<a href="#/">免費.空間</a>
<a href="#/">透明flash</a>
</div>
<p align="center">本特效由 <a href="#" target="_blank">收集於互連網，只為興趣與學習交流，不作商業用途。</p>

執行個體代碼二

代碼如下

複製代碼

<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(yun_qi_img/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><a class=tabs_act id=set_tab01 onmouseover="hovertab('1','2','set_','');" href="#">111cn.net</a></li>
<li><a class=tabs id=set_tab02 onmouseover="hovertab('2','2','set_','');" href="#">精品網頁特效</a> </li>
<li class="table_li"></li>
</ul>
</div>
<div class=tablist id=set_div01>
<li><a href="http://www.111cn.net/html/txdm/">網頁.特效</a></li>
<li><a href="http://www.111cn.net/html/seo/">seo.最佳化</a></li>
<li><a href="http://download.111cn.net/">源碼.下載</a></li>
<li><a href="http://www.111cn.net/html/mfkj/">免費.空間</a></li>
<li><a href="http://links.111cn.net/">交換.連結</a></li>
<li><a href="http://www.111cn.net/seotools/">收錄.查詢</a></li>
<li><a href="http://shop.111cn.net/">芯晴淘寶站</a></li>
<li><a href="http://changshi.111cn.net/">生活常識網</a></li>
</div>
<div class=tablist id=set_div02 style="display: none">
<li><a href="http://www.111cn.net/html/txdm/cddh/" title="">菜單導航特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/tcys/" title="">圖層樣式特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/ljwb/" title="">連結文本特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/txtx/" title="">圖形映像特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/sbtx/" title="">滑鼠特效.代碼</a></li>
<li><a href="http://www.111cn.net/html/txdm/ymck/" title="">頁面視窗特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/wybj/" title="">網頁背景特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/rqsj/" title="">日期時間特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/ymss/" title="">頁面搜尋特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/bgtx/" title="">表格表單特效</a></li>
<li><a href="http://www.111cn.net/html/txdm/qtdm/" title="">其他網頁特效</a></li>
</div>
</div>
</body>
</html>

<p align="center">本特效由 <a href="http://www.111cn.net">芯晴網頁特效</a>丨111cn.net 收集於互連網，只為興趣與學習交流，不作商業用途。</p>

文章由芯晴網頁特效|111cn.net 收集(www.111cn.net) 詳文參考：http://www.111cn.net/html/txdm/cddh/2296.htm

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More