我这个导航效果是在纵向导航菜单制作的基础上,加入鼠标点击主目录的显示隐藏效果,修改的是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">
href="#">-
子目录1
href="#">-
子目录2
href="#">-
子目录3
href="#">-
子目录4
onClick="document.getElementByIdx_x('child2').style.display=(document.getElementByIdx_x('child2').style.display
=='none')?'':'none'" > + 主目录2
style="display:none">
href="#">-
子目录1
href="#">-
子目录2
href="#">-
子目录3
href="#">- 子目录4