Div+CSS+JS树型菜单_html/css_WEB-ITnose

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Div+CSS+JS树型菜单，可刷新 * { margin : 0 ; padding : 0 ; border : 0 ; } body { font-family : arial, 宋体, serif ; font-size : 12px ; } #nav { width : 180px ; line-height : 24px ; 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 : #CC0000 ; /* 一级目录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 : #EBEBEB ; /* 二级目录的背景色 */ }

#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 ; }

我的网站 [url]www.netany.net[/url] 我的帐务 支付 网上支付 登记汇款 在线招领 历史帐务

网站管理 登录 管理 管理 管理

工作需要搞了一个菜单，分享给大家，大家一齐学习

请大家支持: [url]http://www.netany.net" target="_blank">www.netany.net[/url]

[url]www.netany.net[/url] [url]www.netany.net[/url]

我的帐务 支付 网上支付 登记汇款 在线招领 历史帐务

网站管理 登录 管理 管理 管理

工作需要搞了一个菜单，分享给大家，大家一齐学习

请大家支持: [url]http://www.netany.net

var LastLeftID = "";

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);

GetMenuID(); / /* 这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果 menuFix(); -->

Div+CSS+JS树型菜单_html/css_WEB-ITnose

Related articles