Ketika sebaris kode tak berhenti menatap dan tampak naksir kepada Anda.

Home » Blogger » CSS » Desain » Potongan » Mengubah List/Daftar Menjadi Diagram Pohon

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

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;
}

Demo

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

Posting Komentar

Nama Saya ShannenPio . Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias . Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Kontak Sosial

Lain-lain

Dan Tidak lupa, Saya Ucapkan terimakasih atas kunjungan anda di blog yang sederhana ini.

Salam Mas Harris

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?

Tutup
Ke atas!