DIV+CSS+JS树形菜单,可以刷新不改变菜单

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//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 > Div+CSS+JS树型菜单,可刷新 </ title >
< meta name ="description" content ="http://www.NETAny.net" >
< style type ="text/css" > ...
<!--
*
{...}{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菜单的行高和背景色*/
}


/**//*==================一级目录===================*/
#nava
{...}{
width
:160px;
display
:block;
padding-left
:20px;
/**//*Width(一定要),否则下面的Li会变形*/
}


#navli
{...}{
background
:#CCC;/**//*一级目录的背景色*/
border-bottom
:#FFF1pxsolid;/**//*下面的一条白边*/
float
:left;
/**//*float:left,本不应该设置,但由于在Firefox不能正常显示
继承Nav的width,限制宽度,li自动向下延伸
*/

}


#navlia:hover
{...}{
background
:#CC0000;/**//*一级目录onMouseOver显示的背景色*/
}


#nava:link
{...}{
color
:#666;text-decoration:none;
}

#nava:visited
{...}{
color
:#666;text-decoration:none;
}

#nava:hover
{...}{
color
:#FFF;text-decoration:none;font-weight:bold;
}


/**//*==================二级目录===================*/
#navliul
{...}{
list-style
:none;
text-align
:left;
}

#navliulli
{...}{
background
:#EBEBEB;/**//*二级目录的背景色*/
}


#navliula
{...}{
padding-left
:20px;
width
:160px;
/**//*padding-left二级目录中文字向右移动,但Width必须重新设置=(总宽度-padding-left)*/
}


/**//*下面是二级目录的链接样式*/

#navliula:link
{...}{
color
:#666;text-decoration:none;
}

#navliula:visited
{...}{
color
:#666;text-decoration:none;
}

#navliula:hover
{...}{
color
:#F3F3F3;
text-decoration
:none;
font-weight
:normal;
background
:#CC0000;
/**//*二级onmouseover的字体颜色、背景色*/
}


/**//*==============================*/
#navli:hoverul
{...}{
left
:auto;
}

#navli.sfhoverul
{...}{
left
:auto;
}

#content
{...}{
clear
:left;
}

#navul.collapsed
{...}{
display
:none;
}

-->

#PARENT
{...}{
width
:300px;
padding-left
:20px;
}

</ style >
</ head >

< body >
< div id ="PARENT" >
< ul id ="nav" >
< li >< a href ="#Menu=ChildMenu1" onclick ="DoMenu('ChildMenu1')" > 我的网站 </ a >
< ul id ="ChildMenu1" class ="collapsed" >
< li >< a href ="http://www.netany.net" target ="_blank" > www.netany.net </ a ></ li >
< li >< a href ="http://www.netany.net" target ="_blank" > www.netany.net </ a ></ li >
< li >< a href ="http://www.netany.net" target ="_blank" > www.netany.net </ a ></ li >
</ ul >
</ li >
< li >< a href ="#Menu=ChildMenu2" onclick ="DoMenu('ChildMenu2')" > 我的帐务 </ a >
< ul id ="ChildMenu2" class ="collapsed" >
< a href ="http://www.netany.net" target ="_blank" > 支付 </ a ></ li >
< li >< a href ="#" > 网上支付 </ a ></ li >
< li >< a href ="#" > 登记汇款 </ a ></ li >
< li >< a href ="#" > 在线招领 </ a ></ li >
< li >< a href ="#" > 历史帐务 </ a ></ li >
</ ul >
</ li >
< li >< a href ="#Menu=ChildMenu3" onclick ="DoMenu('ChildMenu3')" > 网站管理 </ a >
< ul id ="ChildMenu3" class ="collapsed" >
< li >< a href ="#" > 登录 </ a ></ li >
< a href ="http://www.netany.net" target ="_blank" > 管理 </ a ></ li >
< li >< a href ="#" > 管理 </ a ></ li >
< li >< a href ="#" > 管理 </ a ></ li >
</ ul >
</ li >
< li >< a href
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值