巧用CSS制作树状目录

2016-01-29 12:14 197 1 收藏

巧用CSS制作树状目录,巧用CSS制作树状目录

【 tulaoshi.com - Html 】

索易电子杂志大多采用树状目录,当鼠标点击主目录时,展开子目录;当再次点击主目录时,则关闭子目录。显得简捷明快,朴实无华。制作这种树状目录的方法较多,最近我利用CSS能方便地控制对象的“显 示”和“隐藏”属性原理,也制作一个,我感到用CSS制作这样的树状目录,方法简单,代码也比较少,所以把它写出来,给网友们共亨,以便在需要的时候也可动手做一个。先看下面的示例:当用鼠标在主目录上点一下,就下拉出相应的子目录,再点一下,又恢复原状,其效果与
索易电子杂志上的目录效果完全一致。 
制作方法: 
  我先把产生这种效果的代码复制如下,然后结合代码讲制作方法: 
〈div id="main1" style="color:blue" onclick="document.all.child1.style.display=(document.all
.child1.style.display =='none')?'':'none'" 〉 
+ 主目录1〈/div〉 
〈div id="child1" style="display:none"〉 
〈a href="#"〉- 子目录1〈/a〉 〈br〉 
〈a href="#"〉- 子目录2〈/a〉 〈br〉 
〈a href="#"〉- 子目录3〈/a〉 〈br〉 
〈a href="#"〉- 子目录4〈/a〉 
〈/div〉 
〈div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all
.child2.style.display =='none')?'':'none'" 〉 
+ 主目录2 〈/div〉 
〈div id="child2" style="display:none"〉 
〈a href="#"〉- 子目录1〈/a〉 〈br〉 
〈a href="#"〉- 子目录2〈/a〉 〈br〉 
〈a href="#"〉- 子目录3〈/a〉 
〈/div〉 
  注:“ ”表示一个字符空格 
  1、先定义两个DIV,一个用于主目录,取名为:main1;另一个用于相应的子目录,取名为:child1。  2、在main1的DIV中写上
“+ 主目录1”,并在它的上面加载一个鼠标单击事件:onclick 和一小段javascript程序:document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'。这段程序的作用是,当鼠标在main1的DIV上(也就是在“+ 主目录1”上)单击时,如果child1的DIV是隐藏的,让它显示;若是显示的,则让它隐藏。 
  3、在child1的DIV上写上子目录,并把它设置成超级链接,我在上面的示例中是设置了空链接,实际制作时把它改为实链接,以让它指向链接目标。在child1的DIV定义中加上一个CSS:style="display:none",其目的是使子目录开始时处于隐藏状态。 
  其它目录的制作只是重复上面的三步而已。按F12就可看到效果了。这种方法主要是利用了CSS的显示属性:display,它有一个特点就是当对象被隐藏后,对象所占据的页面空间将自动让出。我们知道CSS还一个属性:visibility也具有显示和隐藏的对象的功能,但不能用来制作上面的树状目录。因为Visibility在隐藏对象后,对象所占据的空间并不释放,也就是当隐藏子目录时,子目录的位置只是一片空白而已位置并没有让出来,因此另一个主目录也就无法靠拢。所以它只能用于那些需要固定页面元素位置的地方。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

来源:https://www.tulaoshi.com/n/20160129/1485184.html

延伸阅读
目录,对于每一个人来说都有重要的意义,目录的作用也是很大的,顾名思义它可以快速的让我们了解书本中的内容,这点个人感觉还是相当不错的。那么WPS中的如何制作目录呢?这个问题想必有很多的朋友都在问吧?说明这个问题还是挺有代表性的。在接下来的文章中就为大家介绍下WPS中目录的制作方法,感兴趣的朋友可以参考下哦,希望对大家有所帮助...
电子技术校本教材的后期制作在汇总完全部文字后,需要编辑一个全书目录,经过研究在wps中可以轻松实现,具体步骤:显示大纲工具栏、为各个章节设置目录级别、生成目录。需要注意的是目录如果超过3级,可以在“目录”子菜单中将“显示级别”调整为更高的数字,在全文修改后可能有些章节的页码会有变动,可以直接单击大纲工...
标签: 电脑入门
PPT能够有目录,也能够没有目录。假如页数很多的时候,在PPT演讲时有目录的PPT能更明晰地表达主题,对听众来说能够理解事先清楚你演讲内容的框架,对协助他了解你将要演讲的内容是十分有用的,假如运用了目录页,倡议在每一段内容开端前再呈现一次目录,突出该段要讲的内容,我们无妨把它叫做PPT转场。 一.PPT目录-常规设计 添加背景,这是被...
标签: Web开发
嗯,你可以说我很无聊。 最近疯狂加班,今天才得以有时间搞一个CSS的像素图来消遣休息下。 先看效果 : 运行代码框 !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"headmeta http-...
标签: Web开发
不用图片,只用css制作圆角的另一方法。来自 html div class="curvedBox"spanspan class="r1" /spanspan class="r2" /spanspan class="r3" /spanspan class="r4" /span /spandiv class="content"Flex is a cross-platform development framework for creating rich Internet...

经验教程

385

收藏

98
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部