Mengubah List/Daftar Menjadi Diagram Pohon
HTML
<ul class="tree">
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 2.1</li>
<li>List item 2.2</li>
<li>List item 2.3</li>
...
...
</ul>
</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
...
...
</ul>
CSS
ul.tree,
ul.tree ul {
list-style:none;
margin:0;
padding:0;
}
ul.tree ul {
margin-left:10px;
background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKAQMAAABPHKYJAAAAA1BMVEWIiIhYZW6zAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1ggGExMZBky19AAAAAtJREFUCNdjYMAEAAAUAAHlhrBKAAAAAElFTkSuQmCC') repeat-y 0 100%;
}
ul.tree li {
margin:0;
padding:0 12px;
font-size:14px;
line-height:20px;
color:#369;
font-weight:bold;
}
ul.tree ul li {
background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIJYVaFGwAAAARSURBVAjXY2hgQIf/GTDFGgDSkwqATqpCHAAAAABJRU5ErkJggg==') no-repeat 0 0;
}
ul.tree ul li.last,
ul.tree ul li:last-child {
background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIIhs+gc8AAAAQSURBVAjXY2hgQIf/GbAAAKCTBYBUjWvCAAAAAElFTkSuQmCC') no-repeat 0 100%;
}
Demo
Referensi: Turning List into Trees
Murni CSS/Tanpa Gambar
Berikut ini adalah versi CSS yang Saya buat berdasarkan contoh di atas. Tanpa gambar, hanya menggunakan pseudo element:
CSS
ul.tree,
ul.tree ul {
list-style:none;
margin:0;
padding:0;
}
ul.tree ul {
margin-left:10px; /* indentation */
position:relative;
}
ul.tree ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
bottom:0;
left:0;
border-left:1px solid;
}
ul.tree li {
margin:0;
padding:0 12px; /* indentation + 2 */
font-size:14px;
line-height:20px; /* default list item `line-height` */
color:#369;
font-weight:bold;
position:relative;
}
ul.tree ul li:before {
content:"";
display:block;
width:10px; /* same with indentation */
height:0;
border-top:1px solid;
position:absolute;
top:10px;
left:0;
}
ul.tree ul li:last-child:before {
background:white; /* same with body background */
height:auto;
top:10px; /* (line-height/2) */
bottom:0;
}
6 Komentar
Beben Koben
cie ciee cieee :p
http://cssdeck.com/labs/pure-css-tree-menu-framework
azewdsignet
kalau di buat jadi link strukur Markup ya gmna?
Taufik Nurrohman
Unknown
Wah mantep nih gan Taufik :)
kira" kalo di buat untuk label bisa gk ya????
generasimumet
artikelnya makyus semua ni mas taufik,betad dah baca-baca di sini trimakasih atas artikel-artikel yang sangat bermanfaat ini mas :-bd
Unknown
Bagainmana cara agar tampilannya bisa ada tombol expand? :D