php菜单⽬录树,css实现的⽬录树型导航菜单
我这个导航效果是在纵向导航菜单制作的基础上，加⼊⿏标点击主⽬录的显⽰隐藏效果，修改的是DIV代码：
onClick="ElementByIdx_x('child1').style.display=(ElementByIdx_x('child1').style.display
=='none')?'':'none'"
>实例教程
>
href="#">图⽚处理
href="#">图⽚合成
href="#">抠图⽅法
href="#">溶图⽅法
导航菜单
href="#">调⾊⽅法
href="#">视频实例
href="#">⿏绘实例
href="#">⿏绘⼈物
href="#">⿏绘国画
href="#">⽂字实例
href="#">动画实例
/>
说明：
1.先定义两个DIV，⼀个⽤于主⽬录，取名为：main1；另⼀个⽤于相应的⼦⽬录，取名为：child1。多个主⽬录，就分别命名为：
main2，；相应的⼦⽬录也就分别命名为：child2，。
2.在main1的DIV中写上“实例教程(主⽬录1)”，并在它的上⾯加载⼀个⿏标单击事件：onclick
和⼀⼩段javascript程序，即加⼊⿏标点击主⽬录的显⽰隐藏效果：
onClick="ElementByIdx_x('child1').style.display=(ElementByIdx_x('child1').style.display
=='none')?'':'none'"
3.在child1的DIV上写上⼦⽬录，并把它设置成超级链接，我在上⾯的⽰例中是设置了空链接，实际制作时把它改为实链接，以让它指向链接⽬标。在child1的DIV定义中加上⼀个CSS：，其⽬的是使⼦⽬录开始时处于隐藏状态。
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="ElementByIdx_x('child1').style.display=(ElementByIdx_x('child1').style.display =='none')?'':'none'" > +
主⽬录1
>
href="#">-
⼦⽬录1
href="#">-
⼦⽬录2
href="#">-
⼦⽬录3
href="#">-
⼦⽬录4
onClick="ElementByIdx_x('child2').style.display=(ElementByIdx_x('child2').style.display =='none')?'':'none'" > + 主⽬录2
>
href="#">-
⼦⽬录1
href="#">-
⼦⽬录2
href="#">-
⼦⽬录3
href="#">- ⼦⽬录4

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。