多階層リストをツリー状するCSS1
サイドバーのリストなどを、多階層ツリー表示させるためのSnippetです。
参考：CODEPEN > Parent child vertical list menu
コード
HTML
<div class="nav">
<ul class=list>
<li> <a href="#">Home</a>
<ul>
<li> <a href="#">Lab</a>
<ul>
<li> <a href="#">Code</a>
<ul>
<li> <a href="#">Html</a> </li>
<li> <a href="#">Css</a> </li>
<li> <a href="#">Jquery</a> </li>
</ul>
</li>
<li> <a href="#">Graph</a>
<ul>
<li> <a href="#">Image</a> </li>
<li> <a href="#">Design</a> </li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Blog</a>
<ul>
<li> <a href="#">Category</a>
<ul>
<li> <a href="#">Code</a> </li>
<li> <a href="#">Graph</a> </li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">About</a>
<ul>
<li> <a href="#">Vcard</a> </li>
<li> <a href="#">Map</a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
.nav *,
.nav *:before,
.nav *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav * {
margin: 0;
padding: 0;
border: 0 none;
position: relative;
-webkit-transition: all .4s;
-moz-transition: all .4s;
transition: all .4s;
}
.nav h1 {
color: #ccc;
text-align: center;
font-size: 1.5rem;
padding-top: 40px;
text-shadow: rgba(0,0,0,0.6) 1px 0, rgba(0,0,0,0.6) 1px 0, rgba(0,0,0,0.6) 0 1px, rgba(0,0,0,0.6) 0 1px;
}
.nav {
margin: 20px auto;
left: 60px;
width: 455px;
min-height: auto;
}
.nav ul.list,
.nav ul.list ul {
list-style-type: none;
margin:0;
padding:0;
}
.nav ul.list ul {
margin-left:10px;
position:relative;
}
.nav ul.list ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
bottom:0;
left:0;
border-left:1px solid #ccc;
}
.nav ul.list li {
margin:0;
padding:3px 12px;
text-decoration: none;
text-transform: uppercase;
font-size:13px;
line-height:20px;
color:#ccc;
font-weight:normal;
position:relative;
}
.nav ul.list li a {
text-decoration: none;
text-transform: uppercase;
font-size:14px;
line-height:20px;
color:#ccc;
font-weight:bold;
position:relative;
}
.nav ul.list li a:hover,
.nav ul.list li a:hover+ul li a {
color: RGBA(213, 235, 227, 1);
}
.nav ul.list ul li:before {
content:"";
display:block;
width:8px;
height:0;
border-top:1px solid #ccc;
position:absolute;
top:10px;
left: 0;
/*ここは背景色と同じにして、下に伸びている棒を隠す*/
border-left: 1px solid #fff;
}
.nav ul.list ul li:last-child:before {
height: auto;
top: 10px;
bottom: 0;
}
