Mengubah List/Daftar Menjadi Diagram Pohon

Tabel Konten
  1. HTML 
  2. CSS 
  3. Demo 
  • Murni CSS/Tanpa Gambar 
    1. CSS 
    2. Demo 
  • 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;
    }

    Demo 

    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

        <ul class="tree">
        <li><a href="#">List item 1</a></li>
        <li><a href="#">List item 2</a></li>
        <li><a href="#">List item 3</a>
        <ul>
        <li><a href="#">List item 3.1</a></li>
        <li><a href="#">List item 3.2</a></li>
        ...
        ...
        </ul>
        </li>
        <li><a href="#">List item 4</a></li>
        ...
        ...
        </ul>
    • 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

    Komentar telah ditutup.