div＋css＋js示范卷帘菜单
日期：2014-05-17 浏览次数：20585 次
div＋css＋js示例卷帘菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " " target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" " target="_blank">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS+JS二级树型菜单，展开后刷新无影响</title>
<style type="text/css">
<!--
body { font-family: arial, 宋体, serif; font-size:12px; }
* { margin:0px; padding:0px; }
#nav { width:174px; line-height: 24px; list-style-type: none; text-align:left; /*定义整个ul菜单的行高和背景色*/
}
/*==================一级目录===================*/
#nav a { width: 174px; display: block; padding-left:20px; /*Width(一定要)，否则下面的Li会变形*/
}
#nav li { border-bottom:#FFF 1px solid; /*下面的一条白边*/ float:left; background-color: #FECFD6; color:#DD1336; font-weight:bold; }
#nav li a:hover { background:#F85B78; /*一级目录onMouseOver显示的背景色*/ }
#nav a:link { color:#DD1336; text-decoration:none; }
#nav a:visited { color:#DD1336; 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:#ffecef; /*二级目录的背景色*/ font-weight:normal; }
#nav li ul a { padding-left:20px; width:174px;/* 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:#FFAA1C;/* 二级onmouseover的字体颜色、背景色*/
}
/*==============================*/
#nav li:hover ul { left: auto; }
#nav li.sfhover ul { left: auto; }
#content { clear: left; }
#nav ul.collapsed { display: none; }
-->
#PARENT { width:174px; }
</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=##Menu=ChildMenu1>菜单一</a></li>
<li><a href=##Menu=ChildMenu1>菜单一</a></li>
<li><a href=##Menu=ChildMenu1>菜单一</a></li>
<li><a href=##Menu=ChildMenu1>菜单一</a></li>
<li><a href=##Menu=ChildMenu1>菜单一</a></li>
<li><a href=##Menu=ChildMenu1>菜单一</a></li>
<li><a href=##Menu=ChildMenu1>菜单一</a></li>
<li><a href=##Menu=ChildMenu1>菜单一</a></li>
<li><a href=##Menu=ChildMenu1>菜单一</a></li>
<li><a href=##Menu=ChildMenu1>菜单一</a></li>
<li><a href=##Menu=ChildMenu1>菜单一</a></li>
<li><a href=##Menu=ChildMenu1>菜单一</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu2" onClick="DoMenu('ChildMenu2')">菜单二</a>
<ul id="ChildMenu2" class="collapsed">
<li><a href=##Menu=ChildMenu2>菜单二</a></li>
<li><a href=##Menu=ChildMenu2>菜单二</a></li>
<li><a href=##Menu=ChildMenu2>菜单二</a></li>
<li><a href=##Menu=ChildMenu2>菜单二</a></li>
<li><a href=##Menu=ChildMenu2>菜单二</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu3" onClick="DoMenu('ChildMenu3')">菜单三</a>
<ul id="ChildMenu3" class="collapsed">
<li><a href=##Menu=ChildMenu3>菜单三</a></li>
<li><a href=##Menu=ChildMenu3>菜单三</a></li>
<li><a href=##Menu=ChildMenu3>菜单三</a></li>
<li><a href=##Menu=ChildMenu3>菜单三</a></li>
<li><a href=##Menu=ChildMenu3>菜单三</a></li>
<li><a href=##Menu=ChildMenu3>菜单三</a></li>
</ul>
</li>
<li><a href
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
