<!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实现的目录树型导航菜单</title>
<style>
ul { padding:0; margin:0;}
#main1,#main2 ,#main3 { width:100px; height:28px; line-height:28px; padding-left:5px; background:#990000; cursor:pointer; border-bottom:1px solid #fff;}/*主菜单背景颜色*/
#child1,#child2,#child3 { width:105px; background:#999999;}/*二级菜单背景颜色*/
#child1 ul li,#child2 ul li,#child3 ul li { padding-left:5px; border-bottom:1px solid #fff; line-height:180%;}
#child1 ul li a,#child2 ul li a,#child3 ul li a { color:#0000ff;}/*二级字体颜色*/
.style2 {font-size: 12px}
</style>
</head>
<body>
<div class="style2" id="main1" onClick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'" > + 主目录1</div>
<div class="style2" id="child1" style="display:none">
<ul>
<li><a href="#">- 子目录1</a></li>
<li><a href="#">- 子目录2</a></li>
<li><a href="#">- 子目录3</a></li>
<li><a href="#">- 子目录4</a></li>
</ul>
</div>
<div class="style2" id="main2" onClick="document.all.child2.style.display=(document.all.child2.style.display =='none')?'':'none'" > + 主目录2 </div>
<div class="style2" id="child2" style="display:none">
<ul>
<li><a href="#">- 子目录1</a></li>
<li><a href="#">- 子目录2</a></li>
<li><a href="#">- 子目录3</a></li>
<li><a href="#">- 子目录4</a> </li>
</ul>
</div>
<div class="style2" id="main3" onClick="document.all.child3.style.display=(document.all.child3.style.display =='none')?'':'none'" > + 主目录3 </div>
<div class="style2" id="child3" style="display:none">
<ul>
<li><a href="#">- 子目录1</a></li>
<li><a href="#">- 子目录2</a></li>
<li><a href="#">- 子目录3</a></li>
<li><a href="#">- 子目录4</a> </li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
包含一个树结构的导航目录（菜单），支持多级。当选择子节点(未全选)的时候父节点为不选，当选择子节点(全选)的时候父节点为全选！结点支持链接。 如果你用了觉得可以，记得回复支持一下。 本人所有资源发布均只...
jquery树型可收缩导航菜单.zip
根据模板生成自己喜欢的栏式或树型导航菜单,自动生成 html+javascript+css代码,html,javascript,css可以很好的分离. 使用:解压安装，进入安装目录打开run001.html即可。
JS 导航菜单 下拉菜单 树型菜单 经典导航 CSS+DIV布局
JS 导航菜单 下拉菜单 树型菜单 经典导航 CSS+DIV布局
treeMaker 是一款制作树型网页导航菜单的共享软件。适合于分类栏目众多的页面。内容太多而需 动态载入菜单的页面。(利用ASP,PHP等从数据库读入数据，生成脚本代码返回给浏览器即可)。 ·采用面向对象的方法，可以用...
js实现导航树 js导航菜单 懂得基本的js和css就可以进行修改 配合php，asp等可以实现动态的导航树，这样的菜单常用与一些CMS，分类信息管理系统的系统导航中。很实用
js，css实现各类页面特效。CSS导航_下拉菜单、超漂亮的滑动门、各类抽屉菜单、树型效果........
各类页面特效代码，谷歌多级菜单、CSS导航下拉菜单、超漂亮的滑动门、各类抽屉菜单、树型效果............
9.20.htm 实现树型导航菜单的完整代码 第10章（/C10/） ReturnText Ajax返回字符串数据 ReturnXML Ajax读取XML类型数据 PostUser Ajax提交数据更新服务器内容 xmlhttpWeather ...
5) 站点结构：分类存放网站中的资源，一律以树型目录结构表示并说明文件夹的用途 。 6) 站点地图：以结构图方式给出网页的名称和各页面间的超级链接。 7) CSS、行为：说明制作、使用了几个CSS样式，说明CSS样式的...
11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹...
11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹...
Java右键弹出菜单源码 简单 Java圆形按钮实例代码，含注释 两个目标文件，自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟，效果图如下所示...
Java右键弹出菜单源码 简单 Java圆形按钮实例代码，含注释 两个目标文件，自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟，效果图如下所示...