当前位置:首页 > DIV+CSS实例 > 正文

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

作者:珊瑚虫 来源:aa25.cn 【 】 浏览: 修改日期:2009-03-24 我要评论(8)     

    左侧导航菜单是我一直以来想做的一种效果,对我来说是学习三步曲吧:05年找了个教程,没有CSS代码,对于我这种菜鸟来说,是无可奈何的了,只好保存教材,等待机会;

    这次看到带代码的教程,赶快学做,成功了,很高兴,但在ie里没有问题,在Firefox里,树型导航菜单却不会打开,真是头疼。原因是加载的鼠标单击事件:onclick 和一小段javascript程序,这里的document.all是针对ie的,ff是不认识这个的;

   群友Jìп·уC帮忙,修改了代码,把document.all.child2改成document.getElementById('child2')。
div的style一开始的时候就是none,通过onclick改变div的style为“”,就出来了。document.getElementById是标准的 浏览器基本上都支持的,改完后,效果就出来了。微调工作还是做了不少:对于li,我明明设置了底对齐,却看到文字是顶对齐,哭笑不得哦,把插入的标签图片做到CSS的背景里,问题才解决;标题与子菜单之间的空行,是因为html的标签都有默认的一些边距 所以为了能够更好把握这些标签 通常需要在使用前reset一下,就是将我们用的标签清除margin padding border,这里把ul, li,h1进行设置:

ul, li,h1{
margin:0;
padding:0;
}

还有定位方面的调整。

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

<div id="main1" onClick="document.getElementById('child1').style.display=(document.getElementById('child1').style.display =='none')?'':'none'" >实例教程</div>
<div id="child1" style="display:none"class="list" >
<li><a href="#">图片处理</a></li>
<li><a href="#">图片合成</a></li>
<li><a href="#">抠图方法</a></li>
<li><a href="#">溶图方法</a></li>
<li><a href="#">调色方法</a></li>
<li><a href="#">视频实例</a></li>
<li><a href="#">鼠绘实例</a></li>
<li><a href="#">鼠绘人物</a></li>
<li><a href="#">鼠绘国画</a></li>
<li><a href="#">文字实例</a></li>
<li><a href="#">动画实例</a></li>

<br /></div>

说明:

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

      2.在main1的DIV中写上“实例教程(主目录1)”,并在它的上面加载一个鼠标单击事件:onclick 和一小段javascript程序,即加入鼠标点击主目录的显示隐藏效果: onClick="document.getElementById('child1').style.display=(document.getElementById('child1').style.display =='none')?'':'none'"

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

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

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

 


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

本文由群成员珊瑚虫提供。欢迎大家提供更多精彩教程

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS实例〗Tags: js css 目录树 树形导航 导航菜单

更多评论(8)..会员评论

xtyygydp(113.109.*.*) 发表于:2010-09-16 16:31:18
三级树目录呢?应该怎么写啊
管理员回复:根据教程自己研究研究吧
123456(122.96.*.*) 发表于:2010-08-11 14:46:56
第一个子目录在打开默认为展开怎么搞
管理员回复:把display:none去掉不就行了
indelx(114.118.*.*) 发表于:2010-07-30 20:15:29
子目录能悬停到主目录的旁边最上面。不影响网站整体布局。
cm28689(180.94.*.*) 发表于:2010-03-17 22:32:29
能否在MAIN這層中連結網頁之餘,也能同一時間打開子目錄
管理员回复:可以的,請在主目錄上增加個鏈接就可以了
Guest(59.41.*.*) 发表于:2009-11-17 09:48:39
点一个菜单时让另一个菜单收起来时在onClick='child2.style.display='none';document.getElementById('child1').style.display=(document.getElementById('child1').style.display =='none')?'':'none'' >onClick='child1.style.display='none';document.getElementById('child2').style.
divcss(112.122.*.*) 发表于:2009-08-10 20:34:49
非常好,正是我想要的,不知能否再改进一下,就是点一个菜单时让另一个菜单收起来,否则菜单多了,会弄得太长了。
管理员回复:再点一下就折叠了
Guest(218.26.*.*) 发表于:2009-07-14 22:37:08
谢谢,受益匪浅!
管理员回复:不客气
div(123.131.*.*) 发表于:2009-02-23 09:56:07
这个代码在IE下测试没有问题,但是在火狐浏览器里面没有任何反应,无法实现点击下拉菜单。
管理员回复:问题已根据群会员的方法修正了

出差旅游免费预订酒店

【视频教程】新手常见问题