你现在的位置:首页》
欢迎光临菜鸟网站,请留下你的宝贵意见,我会不断改进!

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

    左侧导航菜单是我一直以来想做的一种效果,对我来说是学习三步曲吧: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.其他的内容与纵向导航菜单相似。

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

<!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 { 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;}
</style>
</head>
<body>
<div id="main1" onClick="document.getElementById('child1').style.display=(document.getElementById('child1').style.display =='none')?'':'none'" > + 主目录1</div>
<div 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 id="main2" onClick="document.getElementById('child2').style.display=(document.getElementById('child2').style.display =='none')?'':'none'" > + 主目录2 </div>
<div 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>

</body>
</html>

2009年3月23日

  备注:做好后,鼠标样式为直线,要把它改成手型怎么办?将所有主目录的DIV加CSS内容:cursor:pointer;