◄ Min  Size Fonts: + | - | ± Color: Max ►

How to Make Collapsible TreeView use CSS

Apa karena namanya tree jadi mirip seperti sebuah pohon! Tapi kalau di telaah, mungkin karena fiturnya yang turun-temurun, maka tree di sini memiliki arti sesuatu yg mirip pohon karena keturunan :D Saya hanya mau mengupdate artikel cara membuat collapsible TreeView menggunakan 100% kode CSS. Postingan serupa patut di tengok terlebih dahulu sebelum melangkah ke session berikut ;)
  1. Make line tree navigation pure use css.
  2. Make treevew menu without javascript.
Mirip dengan nomor 2 sepertinya TreeView menu yg sekarang! Karena murni pakai kode CSS and tanpa image tentunya.
DEMO
    • Daftar Isi
      • Post Entry
      • Member Entry
    • Inspirasi
    • Creativity
    • Typography
    • Portfolio
    • Project
    • Contact
Silahkan ambil bumbu CSS collapsible TreeView di restoran terdekat :P
.treeview {
float: left;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.treeview ul {
list-style: none;
padding-left: 1em;
}
.treeview ul li span:hover {
color: #d00;
}
.treeview input {
display: none;
}
.treeview input:checked ~ ul {
display: none;
}
.treeview input ~ label {
cursor: pointer;
}
.treeview input ~ label:before {
content: '';
width: 0;
height: 0;
position: absolute;
margin-left: -1em;
margin-top: 0.4em;
border-width: 4px;
border-style: solid;
border-top-color: transparent;
border-right-color: green;
border-bottom-color: green;
border-left-color: transparent;
}
.treeview input:checked ~ label:before {
margin-left: -0.8em;
border-width: 5px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: red;
}
Markup HTML
<div class="treeview hover">
  <ul>
    <li>
      <input type="checkbox" id="cb-1&quot;>
      <label for="cb-1">
        <span>Title 1</span>
      </label>
      <ul>
        <li><span>Daftar Isi</span></li>
        <li>
          <input type="checkbox" id="cb-1-2">
          <label for="cb-1-2">
            <span>Sub Menu</span>
          </label>
          <ul>
            <li><span>Post Entry</span></li>
            <li><span>Member Entry</span></li>
          </ul>
        </li>
        <li><span>Inspirasi</span></li>
        <li><span>Creativity</span></li>
        <li><span>Typography</span></li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="cb-2">
      <label for="cb-2">
        <span>Title 2</span>
      </label>
      <ul>
        <li><span>Portfolio</span></li>
        <li><span>Project</span></li>
        <li><span>Contact</span></li>
      </ul>
    </li>
  </ul>
</div>
Perhatikan secara baik-baik penulisan syntax variabel ul & li. Khusus input type dan label, unik ID harus berbeda dengan sebelumnya, tetapi harus sama dengan type input & label. Jika pemakain unik ID ada yg sama, maka tidak akan jalan alias bentrok :-"
Source by: codepen.io/galaxija737/full/bKrEL
Happy coding \m/
Loading...
XHow to Make Collapsible TreeView use CSS
Membuat collapsible TreeView menu murni 100% memakai attribut CSS. Input type teknik.
Subscribe my posts Register For Free!

7 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE