首頁 > 開發者 > JavaScript

JS+CSS實現簡單的二級下拉導覽功能表效果，jscss下拉導覽功能表

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

JS+CSS實現簡單的二級下拉導覽功能表效果，jscss下拉導覽功能表

本文執行個體講述了JS+CSS實現簡單的二級下拉導覽功能表效果。分享給大家供大家參考。具體如下：

這是一款CSS配合JavaScript實現二級下拉導覽功能表，好像CSS要配合JS才能寫出好效果來，本款菜單同樣用到了JS，菜單目前支援兩級，下拉導航是我們經常用的一種菜單形式，把這個修改一下你就能用了，結構挺簡單，相信你會做好的。

運行效果如下：

線上示範地址如下：

http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/

具體代碼如下：

<!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"><head><title>CSS二級下拉導覽功能表</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';}#mainNavBar{width:100%;background:#999;padding:10px 0;}#nav{width:760px;height:30px;margin:0 auto;}#nav ul{padding:0;margin:0;}#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}#nav ul li a{display:block;color:#fff;text-decoration:none;}#nav ul li a:hover{font-weight:bold;background:#666;}#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}#subNav a{text-decoration:none;font-weight:normal;display:block;}#subNav a:hover{color:#f00;background:#f00;}</style></head><body><div id="mainNavBar"> <div id="nav">  <ul>   <li>    <a href="#">添加</a>    <div id="subNav">     <a href="#">日誌</a>     <a href="#">分類</a>    </div>   </li>   <li>    <a href="#">管理</a>    <div id="subNav">     <a href="#">分類</a>     <a href="#">文章</a>    </div>   </li>   <li>    <a href="#">擴充</a>    <div id="subNav">     <a href="#">評論管理</a>     <a href="#">留言管理</a>     <a href="#">登出退出</a>    </div>   </li>  </ul> </div></div><script language="javascript">var nav=document.getElementById("nav").getElementsByTagName("li");for(i=0;i<nav.length;i++){nav[i].onmouseover=function(){ this.style.fontWeight="bold"; this.style.overflow="visible"; this.style.background="#666666"; }nav[i].onmouseout=function(){ this.style.fontWeight="normal"; this.style.background="#999999" this.style.overflow="hidden"; }}</script></body></html>

希望本文所述對大家的JavaScript程式設計有所協助。

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

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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