當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
CSS+JS灰色树型菜单导航代码
生活随笔
收集整理的這篇文章主要介紹了
CSS+JS灰色树型菜单导航代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼簡介：
CSS+JS打造的樹型菜單，沒有怎么美化，顏色看上去也不很美，提供一種思路，真想用的朋友好好修改一下顏色，里面都有注釋，相信通過你的努力，它最終的效果一定很漂亮。
代碼內容：
<!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>CSS+JS灰色樹型菜單導航代碼_網頁代碼站(www.webdm.cn)</title><style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body {font-family: arial;font-size:9pt; } #nav {width:180px;line-height: 25px; list-style-type: none;text-align:left;/*定義整個ul菜單的行高和背景色*/ } /*==================一級目錄===================*/ #nav a {width: 160px; display: block;padding-left:20px;/*Width(一定要)，否則下面的Li會變形*/ } #nav li {background:#ccc; /*一級目錄背景色*/border-bottom:#FFF 1px solid; /*下面的一條白邊*/float:left;/*float：left,本不應該設置，但由于在Firefox不能正常顯示繼承Nav的width,限制寬度，li自動向下延伸*/ } #nav li a:hover{background:#0066cc; /*一級目錄onMouseOver顯示的背景色*/ } #nav a:link {color:#666; text-decoration:none; } #nav a:visited {color:#666;text-decoration:none; } #nav a:hover {color:#FFF;text-decoration:none;font-weight:bold; } /*==========二級目錄==========*/ #nav li ul {list-style:none;text-align:left; } #nav li ul li{ background: #eee; /*二級目錄背景色*/ } #nav li ul a{padding-left:20px;width:160px;/* padding-left二級目錄中文字向右移動，但Width必須重新設置=(總寬度-padding-left)*/ } /*下面是二級目錄的鏈接樣式*/ #nav li ul a:link {color:#666; text-decoration:none; } #nav li ul a:visited {color:#666;text-decoration:none; } #nav li ul a:hover {color:#F3F3F3;text-decoration:none;font-weight:normal;background:#CC0000;/* 二級onmouseover的字體顏色、背景色*/ } /*==============================*/ #nav li:hover ul {left: auto; } #nav li.sfhover ul {left: auto; } #content {clear: left; } #nav ul.collapsed {display: none; } --> #PARENT{width:300px;padding-left:20px; } </style> </head> <body> <div id="PARENT"> <ul id="nav"> <li><a href="#Menu=ChildMenu2" οnclick="DoMenu('ChildMenu2')">帳務管理</a><ul id="ChildMenu2" class="collapsed"><a href="/" target="_blank">支付</a></li><li><a href="#">在線支付</a></li><li><a href="#">銀行匯款</a></li><li><a href="#">財務招領</a></li></ul> </li> <li><a href="#Menu=ChildMenu3" οnclick="DoMenu('ChildMenu3')">網站管理</a><ul id="ChildMenu3" class="collapsed"><a href="/" target="_blank">在線管理</a></li><li><a href="#">后臺管理</a></li></ul> </li> <li><a href="#Menu=ChildMenu4" οnclick="DoMenu('ChildMenu4')">其它分類</a><ul id="ChildMenu4" class="collapsed"><li><a href="#">退出登錄</a></li></ul> </li> </ul> </div> <div style="width:300;padding-left:30px;"> </div> </body> </html> <script type=text/javascript><!-- var LastLeftID = ""; function menuFix() {var obj = document.getElementById("nav").getElementsByTagName("li");for (var i=0; i<obj.length; i++) {obj[i].οnmοuseοver=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}obj[i].onMouseDown=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}obj[i].onMouseUp=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}obj[i].οnmοuseοut=function() {this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");}} } function DoMenu(emid) {var obj = document.getElementById(emid); obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");if((LastLeftID!="") && (emid!=LastLeftID)) //關閉上一個Menu{document.getElementById(LastLeftID).className = "collapsed";}LastLeftID = emid; } function GetMenuID() {var MenuID="";var _paramStr = new String(window.location.href);var _sharpPos = _paramStr.indexOf("#");if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1){_paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);}else{_paramStr = "";}if (_paramStr.length > 0){var _paramArr = _paramStr.split("&");if (_paramArr.length>0){var _paramKeyVal = _paramArr[0].split("=");if (_paramKeyVal.length>0){MenuID = _paramKeyVal[1];}}/*if (_paramArr.length>0){var _arr = new Array(_paramArr.length);}//取所有#后面的，菜單只需用到Menu//for (var i = 0; i < _paramArr.length; i++){var _paramKeyVal = _paramArr[i].split('=');if (_paramKeyVal.length>0){_arr[_paramKeyVal[0]] = _paramKeyVal[1];} }*/}if(MenuID!=""){DoMenu(MenuID)} } GetMenuID(); //*這兩個function的順序要注意一下，不然在Firefox里GetMenuID()不起效果 menuFix(); --></script> <br> <p><a href="http://www.webdm.cn">網頁代碼站</a> - 最專業的代碼下載網站 - 致力為中國站長提供有質量的代碼！</p>代碼來自：http://www.webdm.cn/webcode/06ca664b-5a40-4df8-8727-eb28efbcadc0.html
轉載于:https://www.cnblogs.com/webdm/archive/2011/04/24/2026138.html
總結
以上是生活随笔為你收集整理的CSS+JS灰色树型菜单导航代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 详解Ibatis写CLOB数据
- 下一篇： ASP.NET中进行消息处理(MSMQ)