CSS+JS黑色橫向三級導航條

2024-09-05 12:19:22

字體：大中小

來源：轉載

供稿：網友

CSS+JavaScript橫向黑色導航條，看上去很酷，三級折疊、展開。使用LI列表。符合W3C WEB標準，復制到你的網頁中就可用了，很舒服的導航菜單。

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>黑色多級彈出菜單</title><style>body {margin: 7px;font:12px Verdana, Arial, Helvetica, sans-serif;}* {list-style-type: none;margin: 0px;padding: 0px;border: thin none;}#nav {position: absolute;font-size: 11px;opacity: 0.8;}#nav a {display: block;width: 100px;height: 15px;padding: 3px 5px 12px;background: #666;color: #fff;text-decoration: none;}#nav a:hover {background: #333;}#nav li {float: left;clear: left;width: 120px;background: #ccc;padding-bottom: 3px;}#nav ul {position: absolute;margin-left: 115px;margin-top: -30px;}#nav ul {display: none;}#nav li.show ul {display: block;}#nav li.show li ul {display: none;}#nav li li.show ul {display: block;}</style><script language="javascript" type="text/javascript">function menuFix() {var sfEls = document.getElementById("nav").getElementsByTagName("li");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=(this.className.length>0? " ": "") + "show";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp("( ?|^)show//b"), "");}}}window.onload=menuFix;</script></head><body><ul id="nav"><li>Main Page<ul><li>Lasted Update<ul><li>Class</li><li>New Update</li></ul></li><li>ASP<ul><li>聊天留言</li><li>企業建站</li><li>論壇社區</li><li>新聞文章</li><li>博客日記</li><li>CMS系統</li><li>學校政府</li><li>影音視頻</li><li></ul></li><li>PHP<ul><li>聊天留言</li><li>企業建站</li><li>論壇社區</li><li>新聞文章</li><li>博客日記</li><li>CMS系統</li><li>學校政府</li><li>影音視頻</li><li></ul></li><li>Delphi<ul><li>游戲娛樂</li><li>媒體網絡</li><li>窗體界面</li><li>算法相關</li><li>系統相關</li></ul></li></ul></li><li>VC++<ul><li>游戲娛樂</li><li>媒體網絡</li><li>窗體界面</li><li>算法相關</li><li>系統相關</li></ul></li><li>Java<ul><li>游戲娛樂</li><li>媒體網絡</li><li>窗體界面</li><li>算法相關</li><li>系統相關</li></ul></li></ul></body></html>

上一篇：二級菜單居中的橫向CSS下拉菜單

下一篇：鼠標滑過變色的菜單欄

學習交流

如何查找有故障的配件

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

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注