[CSS]多階層のリスト要素をツリー状にデザインするスタイルシートのテクニック
Post on:2014年4月18日
sponsors
画像を使用せずに、多階層のリストをツリー状にデザインするスタイルシートのテクニックを紹介します。
ピュアCSSなので、リストのアイテムは増やしても減らしても、ツリー状のスタイルを適用できます。
実際の動作は、下記ページでご確認ください。
Parent child vertical list menu
コードはこんな感じです。
HTML
リストは階層ごとに入れ子を使用します。
コードは、CodeのjQueryまで。
<nav 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> 以下略
CSS
階層ごとのインデントやツリーに使用しているラインは、全てスタイルシートで実装されています。日本語で使用する場合は、font-size, line-heightを調整した方がよいと思います。
@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
border: 0 none;
position: relative;
-webkit-transition: all .4s;
-moz-transition: all .4s;
transition: all .4s;
}
html,
body {
width: 100%;
height: 100%;
background: RGBA(0, 58, 97, 1);
font-family: 'Fjalla One', sans-serif;
font-size: 18px;
}
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;
}
ul.list,
ul.list ul {
list-style-type: none;
margin:0;
padding:0;
}
ul.list ul {
margin-left:10px;
position:relative;
}
ul.list ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
bottom:0;
left:0;
border-left:1px solid #ccc;
}
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;
}
ul.list li a {
text-decoration: none;
text-transform: uppercase;
font-size:14px;
line-height:20px;
color:#ccc;
font-weight:bold;
position:relative;
}
ul.list li a:hover,
ul.list li a:hover+ul li a {
color: RGBA(213, 235, 227, 1);
}
ul.list ul li:before {
content:"";
display:block;
width:8px;
height:0;
border-top:1px solid #ccc;
position:absolute;
top:10px;
left: 0;
}
ul.list ul li:last-child:before {
background: RGBA(0, 58, 97, 1);
height: auto;
top: 10px;
bottom: 0;
}
実装にあたり、下記のツリーメニューを参考にしたそうです。
sponsors
