php 菜单目录树,css实现的目录树型导航菜单

转载于 2021-03-10 21:00:58 发布 · 182 阅读

文章标签：

本文介绍了一种使用CSS和JavaScript实现的导航菜单效果，通过点击主目录来展示或隐藏子目录，适用于网页设计中的导航栏制作。

我这个导航效果是在纵向导航菜单制作的基础上，加入鼠标点击主目录的显示隐藏效果，修改的是DIV代码：

onClick="document.getElementByIdx_x('child1').style.display=(document.getElementByIdx_x('child1').style.display

=='none')?'':'none'"

>实例教程

href="#">图片处理

href="#">图片合成

href="#">抠图方法

href="#">溶图方法

href="#">调色方法

href="#">视频实例

href="#">鼠绘实例

href="#">鼠绘人物

href="#">鼠绘国画

href="#">文字实例

href="#">动画实例

说明：

1.先定义两个DIV，一个用于主目录，取名为：main1；另一个用于相应的子目录，取名为：child1。多个主目录，就分别命名为：main2，main3....；相应的子目录也就分别命名为：child2，child3......。

2.在main1的DIV中写上“实例教程(主目录1)”，并在它的上面加载一个鼠标单击事件：onclick

和一小段javascript程序，即加入鼠标点击主目录的显示隐藏效果：

onClick="document.getElementByIdx_x('child1').style.display=(document.getElementByIdx_x('child1').style.display

=='none')?'':'none'"

3.在child1的DIV上写上子目录，并把它设置成超级链接，我在上面的示例中是设置了空链接，实际制作时把它改为实链接，以让它指向链接目标。在child1的DIV定义中加上一个CSS：style="display:none"，其目的是使子目录开始时处于隐藏状态。

4.其他的内容与纵向导航菜单相似。

我修改后的完整代码如下：

css实现的目录树型导航菜单

ul { padding:0; margin:0;}

#main1,#main2 { width:100px; height:28px; line-height:28px;

padding-left:5px; background:#ccc; cursor:pointer;

border-bottom:1px solid #fff;}

#child1,#child2 { width:105px; background:#eee;}

#child1 ul li,#child2 ul li { padding-left:5px; border-bottom:1px

solid #fff; line-height:180%;}

#child1 ul li a,#child2 ul li a { color:#666;}

onClick="document.getElementByIdx_x('child1').style.display=(document.getElementByIdx_x('child1').style.display

=='none')?'':'none'" > +

主目录1

style="display:none">

onClick="document.getElementByIdx_x('child2').style.display=(document.getElementByIdx_x('child2').style.display

=='none')?'':'none'" > + 主目录2

style="display:none">