站长地带教了大家最基础的CSS导航条制作方法后，就应该在此CSS导航条基础上，做出更多的变通，用来适应更多的导航条制作方法。
这讲就是来制作《css导航条：纯css制作目录树形导航菜单》，
下面的代码是body里面的结构部分，有一些在做的过程中遇到的疑问，写了一些备注，大家看一下
<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=www.zzarea.com>图片处理</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>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css实现的目录树型导航菜单-www.zzarea.com</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="#" _fcksavedurl="#">- 子目录1</a></li>
<li><a href="#" _fcksavedurl="#">- 子目录2</a></li>
<li><a href="#" _fcksavedurl="#">- 子目录3</a></li>
<li><a href="#" _fcksavedurl="#">- 子目录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="#" _fcksavedurl="#">- 子目录1</a></li>
<li><a href="#" _fcksavedurl="#">- 子目录2</a></li>
<li><a href="#" _fcksavedurl="#">- 子目录3</a></li>
<li><a href="#" _fcksavedurl="#">- 子目录4</a> </li>
</ul>
</div>
</body>
</html>
本文链接：https://www.dnwfb.com/952.html，转载请注明出处。
评论0