Is it possible to make a pure CSS Tree diagram?
I've made an attempt here. However, it has two problems:
- IE开发者_高级运维
- Last element of a list being a sublist
Is there a better way of doing this?
You didn't really go into detail on what your criteria are, but from what you have said, I'd suggest taking a look at SlickMap CSS.
Update: Got it! I just remembered where I'd seen what you're looking for:
jsTree is a jQuery plugin which creates a tree widget with the kind of styling you want and uses <ul> internally to represent it.
Try the code below, it's pure CSS and no JS/jQuery (which IMO is way more compatible), works by manipulating borders and spacing.
Works on FF/Chrome & IE. Enjoy :-)
.parent a,
li {
font-size: 22px;
color: #000;
font-family: "Source Sans Pro", sans-serif;
}
.child a,
li {
font-size: 18px;
color: #000;
}
.subchild a,
li {
font-size: 18px;
color: #888888;
}
.s2child a,
li {
font-size: 16px;
color: #ccc;
}
.tree,
.tree ul {
list-style-type: none;
margin-left: 0 0 0 10px;
padding: 0;
position: relative;
overflow: hidden;
}
.tree li {
margin: 0 0 0 15px;
padding: 0 12px 0 20px;
position: relative;
}
.tree li::before,
.tree li::after {
content: '';
position: absolute;
left: 0;
}
/* horizontal line on inner list items */
.tree li::before {
border-top: 2px solid #000;
top: 14px;
width: 15px;
height: 0;
}
/* vertical line on list items */
.tree li:after {
border-left: 2px solid #000;
height: 100%;
width: 0px;
top: -5px;
}
/* lower line on list items from the first level because they don't have parents */
.tree > li::after {
top: 15px;
}
/* hide line from the last of the first level list items */
.tree > li:last-child::after {
display: none;
}
/* hide line from before the Home or starting page or first element */
.tree > li:first-child::before {
display: none;
}
.tree ul:last-child li:last-child:after {
height: 20px;
}
.tree a:hover {
color: red;
font-weight: 500;
text-shadow: 1px 2px 2px #F3F3F3;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pure CSS Tree</title>
<link href="tree.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="tree">
<li class="parent"><a href="#">Grand Parent</a>
<ul>
<li class="child"><a href="#">Parent</a>
</li>
<li class="child"><a href="#">Parent</a>
<ul>
<li class="subchild"><a href="#">Child</a>
<ul>
<li class="s2child"><a href="#">Grand Child</a>
</li>
<li class="s2child"><a href="#">Grand Child</a>
</li>
<li class="s2child"><a href="#">Grand Child</a>
</li>
<li class="s2child"><a href="#">Grand Child</a>
</li>
<li class="last s2child"><a href="#">Grand Child</a>
</li>
</ul>
</li>
<li class="subchild"><a href="#">Child</a>
<ul>
<li class="s2child"><a href="#">Grand Child</a>
</li>
<li class="s2child"><a href="#">Grand Child</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="child"><a href="#">Parent</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
加载中,请稍侯......
精彩评论