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

最新推荐文章于 2014-10-27 20:33:00 发布

最新推荐文章于 2014-10-27 20:33:00 发布 · 194 阅读

文章标签：

#CSS #.net #Firefox #XHTML #HTML

本文介绍了一种使用Div、CSS和JavaScript创建树型菜单的方法，该菜单支持刷新功能。通过精心设计的CSS样式，实现了菜单项的层级展示效果，并提供了鼠标悬停时的视觉反馈。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

<title>Div+CSS+JS树型菜单，可刷新</title>

<metaname="description"content="http://www.NETAny.net">

<styletype="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>

<divid="PARENT">

<ulid="nav">

<ulid="ChildMenu1"class="collapsed">

<li><ahref="http://www.netany.net"target="_blank">www.netany.net</a></li>

</ul>

</li>

<ulid="ChildMenu2"class="collapsed">

<ahref="http://www.netany.net"target="_blank">支付</a></li>

</ul>

</li>

<ulid="ChildMenu3"class="collapsed">

<ahref="http://www.netany.net"target="_blank">管理</a></li>

</ul>

</li>

<li><ahref