树形菜单（纯CSS）
html结构：
& & li.tree-node
& && &&&label
& && && && &input.node-check
& && && && &div.node-content
& && && && && & i.node-icon
& && && && && & ……
& && && && && & span.node-text
& && && && && & ul.tree
& && && && && && &&&……
css 代码片段.tree{
list-style:
padding-left:0;
-webkit-user-select:
-moz-user-select:
-o-user-select:
-ms-user-select:
user-select:
.tree&.tree-node .tree{
overflow-y:
max-height:300
-webkit-transition:max-height .5s ease-
-moz-transition:max-height .5s ease-
-o-transition:max-height .5s ease-
-ms-transition:max-height .5s ease-
transition:max-height .5s ease-
.tree-node{
margin-top:-3
.tree input.node-check{
.tree&.tree-node&label{
.tree .node-content{
display:inline-
.tree .node-content&.node-text{
font-size:12
line-height:14
font-family:arial,verdana,Microsoft YaHei,Tahoma,Simsun,sans-
margin-left:-4
.tree .node-content&.node-text:hover{
color:#00A000;
.node-icon{
background-repeat:no-
background-size:100% 100%;
display:inline-
vertical-align:
.node-check:checked+.node-content&.tree{
max-height:0;
.node-check:checked+.node-content&.icon-folder{
background-image:url(/uploads/rs/193/ybc7pl9z/folder.gif);
.node-check:checked+.node-content&.icon-expand{
background-image:url(/uploads/rs/193/ybc7pl9z/elbow-end-plus-nl.gif);
.icon-expand{
background-image:url(/uploads/rs/193/ybc7pl9z/elbow-end-minus-nl.gif);
.icon-minus{
background-image:url(/uploads/rs/193/ybc7pl9z/elbow-minus.gif);
.icon-elbow{
background-image:url(/uploads/rs/193/ybc7pl9z/elbow.gif);
.icon-elbow-line{
background-image:url(/uploads/rs/193/ybc7pl9z/elbow-line.gif);
.icon-elbow-end{
background-image:url(/uploads/rs/193/ybc7pl9z/elbow-end.gif);
.icon-file{
background-image:url(/uploads/rs/193/ybc7pl9z/leaf.gif);
.icon-folder{
background-image:url(/uploads/rs/193/ybc7pl9z/folder-open.gif);
html 代码片段效果预览&!doctype html&
&title&树形菜单&/title&
&meta charset=&utf-8&&
background:#
list-style:
padding-left:0;
-webkit-user-select:
-moz-user-select:
-o-user-select:
-ms-user-select:
user-select:
.tree&.tree-node .tree{
overflow-y:
max-height:300
-webkit-transition:max-height .5s ease-
-moz-transition:max-height .5s ease-
-o-transition:max-height .5s ease-
-ms-transition:max-height .5s ease-
transition:max-height .5s ease-
.tree-node{
margin-top:-3
.tree input.node-check{
.tree&.tree-node&label{
.tree .node-content{
display:inline-
.tree .node-content&.node-text{
font-size:12
line-height:14
font-family:arial,verdana,Microsoft YaHei,Tahoma,Simsun,sans-
margin-left:-4
.tree .node-content&.node-text:hover{
color:#00A000;
.node-icon{
background-repeat:no-
background-size:100% 100%;
display:inline-
vertical-align:
.node-check:checked+.node-content&.tree{
max-height:0;
.node-check:checked+.node-content&.icon-folder{
background-image:url(/uploads/rs/193/ybc7pl9z/folder.gif);
.node-check:checked+.node-content&.icon-expand{
background-image:url(/uploads/rs/193/ybc7pl9z/elbow-end-plus-nl.gif);
.icon-expand{
background-image:url(/uploads/rs/193/ybc7pl9z/elbow-end-minus-nl.gif);
.icon-minus{
background-image:url(/uploads/rs/193/ybc7pl9z/elbow-minus.gif);
.icon-elbow{
background-image:url(/uploads/rs/193/ybc7pl9z/elbow.gif);
.icon-elbow-line{
background-image:url(/uploads/rs/193/ybc7pl9z/elbow-line.gif);
.icon-elbow-end{
background-image:url(/uploads/rs/193/ybc7pl9z/elbow-end.gif);
.icon-file{
background-image:url(/uploads/rs/193/ybc7pl9z/leaf.gif);
.icon-folder{
background-image:url(/uploads/rs/193/ybc7pl9z/folder-open.gif);
&ul class=&tree&&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon icon-expand&&&/i&
&i class=&node-icon icon-folder&&&/i&
&span class=&node-text&&目录1&/span&
&ul class=&tree&&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon icon-elbow-line&&&/i&
&i class=&node-icon icon-elbow&&&/i&
&i class=&node-icon icon-file&&&/i&
&span class=&node-text&&文件1&/span&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon icon-elbow-line&&&/i&
&i class=&node-icon icon-elbow&&&/i&
&i class=&node-icon icon-file&&&/i&
&span class=&node-text&&文件1&/span&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon icon-elbow-line&&&/i&
&i class=&node-icon icon-expand&&&/i&
&i class=&node-icon icon-folder&&&/i&
&span class=&node-text&&目录22&/span&
&ul class=&tree&&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon icon-elbow-line&&&/i&
&i class=&node-icon icon-elbow&&&/i&
&i class=&node-icon icon-file&&&/i&
&span class=&node-text&&asadsadsa&/span&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon icon-elbow-line&&&/i&
&i class=&node-icon icon-elbow&&&/i&
&i class=&node-icon icon-file&&&/i&
&span class=&node-text&&asdsads&/span&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon icon-elbow-line&&&/i&
&i class=&node-icon icon-elbow&&&/i&
&i class=&node-icon icon-file&&&/i&
&span class=&node-text&&assgghgsdgh&/span&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon icon-elbow-line&&&/i&
&i class=&node-icon icon-elbow-end&&&/i&
&i class=&node-icon icon-file&&&/i&
&span class=&node-text&&sdfdfsas&/span&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon icon-elbow&&&/i&
&i class=&node-icon icon-file&&&/i&
&span class=&node-text&&xxxxx&/span&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon icon-expand&&&/i&
&i class=&node-icon icon-folder&&&/i&
&span class=&node-text&&yyyyyy&/span&
&ul class=&tree&&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon&&&/i&
&i class=&node-icon icon-elbow&&&/i&
&i class=&node-icon icon-file&&&/i&
&span class=&node-text&&zzzzzz&/span&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon&&&/i&
&i class=&node-icon icon-elbow&&&/i&
&i class=&node-icon icon-file&&&/i&
&span class=&node-text&&zzzzzz&/span&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon&&&/i&
&i class=&node-icon icon-elbow&&&/i&
&i class=&node-icon icon-file&&&/i&
&span class=&node-text&&zzzzzz&/span&
&li class=&tree-node&&
&input class=&node-check& type=&checkbox&&
&div class=&node-content&&
&i class=&node-icon&&&/i&
&i class=&node-icon icon-elbow-end&&&/i&
&i class=&node-icon icon-file&&&/i&
&span class=&node-text&&zzzzzz&/span&
//：不错。话说已经有6个人收藏，竟然没人点赞。我先来个。
不错。话说已经有6个人收藏，竟然没人点赞。我先来个。
4 总笔记数
7198 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：热门关键字：
网友杰立分享纯css实现树型结构网站地图特效
网友杰立分享纯css实现树型结构网站地图特效
所属分类：
发布时间： 18:51:45
下载量：878
转载请自觉注明原文：
这个也算得上是网站上一款非常逆天的作品，没有任何或者脚本参考，纯css样式代码实现，兼容所有浏览器，也是从事工作的把收藏已久的作品整理出来分享的，非常实用，使用非常简单，既可当使用，也可以当树型菜单使用，太棒了。。。
核心css样式代码如下：
{ border: 0; border-left: 1px solid #BBBBBB; }
.nav ul li li {color: #000; background:
url("../images/line.gif") left center no-}
.nav ul ul ul {border-left: 1px solid #BBBBBB; }
.nav ul li .sub-sub {background:
url("../images/line.gif") top left no-}
.nav a, .nav a:visited {color: #4F4F4F;}
.nav a:active, .nav a:hover, .nav a:focus,
a:focus .sffocus
{color: #000;}
.nav ul ul a, .nav ul ul a:visited
{color: #4F4F4F;}
.nav ul ul a:active, .nav ul ul a:hover, .nav ul ul a:focus {color: #000;}
/* inner box styling */
/* Level 1 */
.nav ul li .ro {display: width: 100%; background: url("../images/ro-01.gif") top right no-}
.nav ul li .lo {display: width: 100%; background: url("../images/lo-01.gif") top left no-}
.nav ul li .ru {display: width: 100%; background: url("../images/ru-01.gif") bottom right no-}
.nav ul li .lu {display: width: 100%; background: url("../images/lu-01.gif") bottom left no-}
.nav ul li .box-content {width: 100%; padding: 0.1em 0.1em 0.1em 0.1 }
/* Level 2 + 3 */
.nav ul li li .ro {background: url("../images/ro-02.gif") top right no-}
.nav ul li li .lo {background: url("../images/lo-02.gif") top left no-}
.nav ul li li .ru {background: url("../images/ru-02.gif") bottom right no-}
.nav ul li li .lu {background: url("../images/lu-02.gif") bottom left no-}
.nav ul li li .box-content {width: 100%; padding: 0.1em 0.1em 0.1em 0.1 }
/* Level 1 - 3 hover */
.nav ul li a:hover .ro {background: url("../images/ro_h.gif") top right no-}
.nav ul li a:hover .lo {background: url("../images/lo_h.gif") top left no-}
.nav ul li a:hover .ru {background: url("../images/ru_h.gif") bottom right no-}
.nav ul li a:hover .lu {background: url("../images/lu_h.gif") bottom left no-}
效果如下：
如果您觉得本作品对您的学习有所帮助：
如果你喜欢学院的资源就下载吧，亲，谢谢！
提示：如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !
声明: 本站内容均为网友原创或整理于互联网，版权归作品最初创作人，转载请注明（出处）原文链接，转载前请邮件至磐，一旦发现造成侵权行为，后果自负。。
相关插件：css_tree 纯css 树形结构的html代码，大家有需要的拿去 WEB(ASP,PHP,...) 243万源代码下载-
&文件名称: css_tree& & [
& & & & &&]
&&所属分类:
&&开发工具: HTML
&&文件大小: 7 KB
&&上传时间:
&&下载次数: 0
&&提 供 者:
&详细说明：纯css 树形结构的html代码，大家有需要的拿去-cure css tree
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&css_tree\about.html&&........\index.html&&........\脚本下载（广告代码）.html&&........\_styles.css&&........\document.png&&........\folder-horizontal.png&&........\toggle-small-expand.png&&........\toggle-small.png&&css_tree
&输入关键字，在本站243万海量源码库中尽情搜索：织梦模板建站、织梦仿站，推荐选跟版网(专业织梦模板定制下载站)，您可以把织梦模板网：
亲，跟版网是专业的DEDECMS模板下载和定制开发服务商！您可以选择或者
CSS入门 XHTML文档结构树
& &以下内容您可能感兴趣： &
CSS通过与(X)HTML的文档结构相对应的选择器（selector）来达到控制页面表现的目的，而文档结构不仅仅在CSS的应用上非常重要，对于行为层（例如使用JavaScript控制元素的行为）同样也非常重要。 　　文档结构(X)HTML文档可以看作一个家族树，这个树有1个祖先&&根元素，然后各元素依次向下排列，例如有XHTML代码如下，其文档树如图4-1所示。 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&& &html xmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /& &title&文档结构与选择器- www.jb51.net&/title& &/head& &body& &h1&第3章&em&CSS入门&/em&&/h1& &p&&acronym title=&Cascading Style Sheets，层叠样式表&&CSS&/acronym&是一种标记性语言。&/p& &ol& &li&CSS的&em&优缺点&/em&&/li& &li&CSS的使用方法 &ul& &li&内联式样式&/li& &li&嵌入式样式表&/li& &li&外部样式表&/li& &/ul& &/li& &li&&strong&基本&/strong&样式规则&/li& &/ol& &p&CSS通过与(X)HTML的文档结构相对应的&a href=&selector01.html& title= &关于选择器的内容&&选择器（&em&selector&/em&）&/a&来达到控制页面表现的目的。 &/p& &/body& &/html& &文档结构树 　　CSS大部分能力是基于元素的&父子&关系，如果元素A包含了元素B，那么元素A就是&父元素&，被包含的元素B是&子元素&。每个元素都是另一个元素的 &父&或者&子&或者两者都是。例如：&body&既是&html&的子元素，又是&h1&的父元素。在家族树中， 父子元素是相连的，而且父元素在子元素的上面一层。 　　&父&与&子&有时候又被一般化为&祖先（或称前辈）&和&后代（或称子孙）&，从一个元素到另一个元素中间跨越了一层或更多层，就是&祖先/ 后代&关系。例如图4-1中，&html&就是&h1&的祖先，&h1&则是&html&的后代。 &body&是所有浏览器能显示的元素的祖先，而&html&是所有元素的祖先，也称为&根元素（root）&。&祖先/后代& 关系包含&父子&关系。 　　有着相同父元素的元素之间互为&兄弟&关系。例如图4-1中，&h1&和&ol&为兄弟关系，&body&是它们共同的父元素，&ul&里的3个&li&也互相为兄弟关系。 　　提示：很多选择器都是针对文档结构匹配的，因此掌握文档结构的意义非常重要。
跟版网-专业织梦模板下载平台，转载请注明出处：
& &精心为您推荐： &
& &邀您关注： &
扫描左侧二维码即可在手机端访问此页面
扫描左侧二维码即可关注跟版网官方微信公众号，获取金币模板，还可以免费仿站哦！
扫描左侧二维码即可加入跟版网官方群，免费获取金币资源并可以与其他织梦高手共同交流学习
跟版网率先实现织梦的三网合一网站，从即日起（）日，跟版网会陆续免费分享一批金币资源给需要的朋友，关注本站认证官方微信公众账号并回复相应的提取码，系统会自动将下载地址发送给您，同时这些金币资源也会分享在官方的QQ群中，欢迎各位朋友踊跃加入。另外本站后期会每周选择大家比较喜欢的网站仿制，并免费分享给大家，还有免费送金币活动哦！
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
- dede源码分享
售价:16金币
- dede源码分享
售价:80金币
- dede源码分享
售价:10金币
- dede源码分享
售价:0金币
- dede源码分享
售价:40金币
& & & 跟版网竭力打造中国最大的织梦源码和织梦模板商城，我们有一批经验丰富的设计师和程序员，发展五年，跟版网拥有丰富的织梦模板，欢迎您的咨询，我们将竭诚为您提供最优质的服务。
& & & 跟版网织梦源码商城坚持“创意+品质+服务”的高端理念，运用创意设计的理念为您塑造高品质的网络品牌形象。凭借五年的探索和实践，跟版网织梦源码商城拥有一支经验丰富、技术精湛、尽职尽责的网络服务团队。精品网站建设，从跟版网织梦源码商城建站开始。
& & & 跟版网织梦源码和模板可分为两种形式获得，一种是官方源码，另外一种是会员共享源码。两种源码都分为免费和收费两种形式。
& & & 跟版网官方收费源码可通过支付费用获得，具体操作流程可查看网址：。会员共享源码可通过共享模板获取金币下载。如觉得麻烦，可以联系客服QQ：进行金币充值，充值后可随意下载。纯CSS实现家谱树（组织架构树同理） - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 12时,
原代码出处：&
实现的原理很简单：
1、使用 ul、li 元素构建数据源。
2、使用css中的 :before、:after 两个伪类的content属性来构建连接线（本质是 content 的 border）。
代码片段(2)
12-06-44.png&&&&
familyTree.htm&~&3KB&&&&
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Test&/title&
&style class="csscreations"&
/*Now the CSS*/
* {margin: 0; padding: 0;}
.tree ul {
padding-top: 20 position:
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
.tree li {
float: text-align:
list-style-type:
padding: 20px 5px 0 5
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
content: '';
position: top: 0; right: 50%;
border-top: 1px solid #
width: 50%; height: 20
.tree li::after{
right: left: 50%;
border-left: 1px solid #
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
border-right: 1px solid #
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
/*Time to add downward connectors from parents*/
.tree ul ul::before{
content: '';
position: top: 0; left: 50%;
border-left: 1px solid #
width: 0; height: 20
.tree li a{
border: 1px solid #
padding: 5px 10
text-decoration:
color: #666;
font-family: arial, verdana,
font-size: 11
display: inline-
border-radius: 5
-webkit-border-radius: 5
-moz-border-radius: 5
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
border-color:
/*Thats all. I hope you enjoyed it.
Thanks :)*/
We will create a family tree using just CSS(3)
The markup will be simple nested lists
&div class="tree"&
&a href="#"&Parent&/a&
&a href="#"&Child&/a&
&a href="#"&Grand Child&/a&
&a href="#"&Child&/a&
&li&&a href="#"&Grand Child&/a&&/li&
&a href="#"&Grand Child&/a&
&a href="#"&Great Grand Child&/a&
&a href="#"&Great Grand Child&/a&
&a href="#"&Great Grand Child&/a&
&li&&a href="#"&Grand Child&/a&&/li&
开源中国-程序员在线工具：
你好的!你的这个组织架构图好像数据多就不行吗?
2楼：xiaojun207 发表于
这个做的好
3楼：cjavahtml 发表于
开源从代码分享开始
Tobyee的其它代码