分享一个用css制作的家族图谱效果,当你的鼠标悬浮在菜单上,会高亮显示子节点的菜单。
结构图HTML代码
<div class="tree">
<ul>
<li>
<a href="#">Parent</a>
<ul>
<li>
<a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
<li>
<a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
<li>
<a href="#">Grand Child</a>
<ul>
<li><a href="#">Great Grand Child</a></li>
<li><a href="#">Great Grand Child</a></li>
<li><a href="#">Great Grand Child</a></li>
</ul>
</li>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
.tree {
width: 760px;
margin: 40px auto 0 auto
}.tree ul {
padding - top: 20px;
position: relative;
transition: all 0.5s; - webkit - transition: all 0.5s; - moz - transition: all 0.5s;
}
.tree li {
float: left;
text - align: center;
list - style - type: none;
position: relative;
padding: 20px 5px 0 5px;
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: absolute;
top: 0;
right: 50 % ;
border - top: 1px solid#ccc;
width: 50 % ;
height: 20px;
}.tree li: :after {
right: auto;
left: 50 % ;
border - left: 1px solid#ccc;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li: only - child: :after,
.tree li: only - child: :before {
display: none;
}
/*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 {
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li: last - child: :before {
border - right: 1px solid#ccc;
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: absolute;
top: 0;
left: 50 % ;
border - left: 1px solid#ccc;
width: 0;
height: 20px;
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791