Make TreeVew Menu Without JavaScript

Masih belum tergelitik juga mempelajari CSS3? Web satu ini akan Koben bagi buat para pelancong setiaku. Secara khusus, detail memaparkan segala yang berbau Web UI Components. Beben juga tidak mengerti dengan artinya :D Tapi jangan salah, disini trick, tutorial, JS, XML, AJAX, and ketebelece lainnya numplek jadi satu. Lain daripada umumnya, unik berbeda.
So...Beben Koben si bloglang anu ganteng kalem tea akan mencomot satu trik unique dari sana mengenai CSS3 Treevew No JavaScript. Itu yg bisa diambil, ya itu saja postingannya kali ini :P Please welcome the great web:

1. Acid.JS Web UI
2. WeMakeSites.NET

demo Treevew without JavaScript
Mau tau gimana cara bikinnya, mau tau...mau tau beneran!!! Kita lanjutkan mari ~O)
Pertama-tama download terlebih dahulu bahan²nya yg ada di web demo, kalau malas dari sini ajah atuh download. Setelah itu hostingkan 1 image yg ada disana, gambar berikut icon treevew.
Bila sudah, sobat kembali press Ctrl + F or just push F3 (mozilla browse) cari kode ]]></b:skin> Taruh tepat sebelum code tersebut (diatas) CSS high level berikut ini

CSS Coded

.css-treeview ul,.css-treeview li{padding: 0;margin: 0;list-style: none}
.css-treeview input{position: absolute;opacity: 0}
.css-treeview{font: normal 11px "Segoe UI",Arial,Sans-serif;-moz-user-select: none;-webkit-user-select: none;user-select: none}
.css-treeview a{color: #00f;text-decoration: none}
.css-treeview a:hover{text-decoration: underline}
.css-treeview input + label + ul{margin: 0 0 0 22px}
.css-treeview input + label + ul{display: none}
.css-treeview label,.css-treeview label::before{cursor: pointer}
.css-treeview input: disabled + label{cursor: default;opacity: .5}
.css-treeview input:checked:not(: disabled) + label + ul{display: block}
.css-treeview label,.css-treeview label::before{background: url("http://LINK-GAMBAR-HOSTINGAN-TREEVEW.png") no-repeat}
.css-treeview label,.css-treeview a,.css-treeview label::before{display: inline-block;height: 16px;line-height: 16px;,vertical-align: middle}
.css-treeview label{background-position: 18px 0}
.css-treeview label::before{content:"";width: 16px;margin: 0 22px 0 0;vertical-align: middle;background-position: 0 -32px}
.css-treeview input:checked + label::before{background-position: 0 -16px}
@media screen and (-webkit-min-device-pixel-ratio:0){.css-treeview{-webkit-animation:webkit-adjacent-element-selector-bugfix infinite 1s}
@-webkit-keyframes webkit-adjacent-element-selector-bugfix{from{padding: 0}
to{padding:0}
}
}

SAVE deh :D

Design ► Page Elements ► Add a Gadget ► choose HTML/JavaScript
Kalau bisa disendirikan, jangan dicampur dengan yg sudah ada kode lain sob ;) Masukin ramuan HTML berikut

<div class="css-treeview">
<ul>
<li><input type="checkbox" id="item-0" /><label for="item-0">Folder is Closed By Default</label>
<ul>
<li><input type="checkbox" id="item-0-0" /><label for="item-0-0">Folder 1</label>
<ul>
<li><input type="checkbox" id="item-0-0-0" /><label for="item-0-0-0">Sub Folder 1</label>
<ul>
<li><a href="#">Sub Folder 1</a></li>
<li><a href="#">Sub Folder 1</a></li>
<li><a href="#">Sub Folder 1</a></li>
<li><a href="#">Sub Folder 1</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a></li>
<li><a href="#">Folder 1</a></li>
<li><a href="#">Folder 1</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-0-1" /><label for="item-0-1">Folder 2</label>
<ul>
<li><a href="#">item 2</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 2</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-0-2" disabled="disabled" /><label for="item-0-2">Disabled TreeVew</label>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-1" checked="checked" /><label for="item-1">One is Open by Default</label>
<ul>
<li><input type="checkbox" id="item-1-0" /><label for="item-1-0">Tutorial Blog for Stylish Blogger</label>
<ul>
<li><a href="#">Folder 2</a></li>
<li><a href="#">Folder 2</a></li>
<li><a href="#">Folder 2</a></li>
</ul>
</li>
<li><a href="#">Beben</a></li>
<li><a href="#">Koben</a></li>
<li><a href="#">Bloglang</a></li>
<li><a href="#">Ganteng</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-2" /><label for="item-2">Go Blog Go</label>
<ul>
<li><input type="checkbox" id="item-2-0" /><label for="item-2-0">Folder 3</label>
<ul>
<li><input type="checkbox" id="item-2-2-0" /><label for="item-2-2-0">Sub Folder 3</label>
<ul>
<li><a href="#">Folder 3</a></li>
<li><a href="#">Folder 3</a></li>
<li><a href="#">Folder 3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-2-1" /><label for="item-2-1">Semangat</label>
<ul>
<li><a href="#">Some Item</a></li>
<li><a href="#">Some Item</a></li>
<li><a href="#">Some Item</a></li>
<li><a href="#">Some Item</a></li>
<li><a href="#">Some Item</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-2-2" disabled="disabled" /><label for="item-2-2">Disabled TreeVew</label>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Isikan link sesuai kebutuhan. Look for result. Kawan-kawan sekarang sudah mempunyai menu treevew tanpa JavaScript b-)
Berhubung takut ada kode² yang berubah menjadi emoticon, sobat sabit bisa mendownloadnya download bumbu (via ziddu)
Kode checked="checked" yang membuat terbuka menu treevew. Jika kurang sreg dengan posisi menu yg terbukanya, tinggal delete dan gantikan kemana sobat suka.
Praktek sedikit dengan memakai teknik penggunaan input attribute.

<style type="text/css">
ul {
margin: 0;
padding: 10px;
position: relative;
}
li {
padding: 0 0 10px 30px;
list-style: none;
font-size: 15px;
position: relative;
}
li:first-child { }
li::before { content:' ';
position: absolute;
}
li:last-child {
border: none;
margin-left: 1px;
}
li input {
left: 11px;
z-index: 9;
margin-top: 3px;
position: absolute;
opacity: .3;
}
li label {font-weight:bold;cursor: pointer}
li label::after {
content: ' (klik buka)';
font-weight: normal;
font-style: italic;
font-size: 75%;
color: green;
}
li input:checked + label:after {
content: ' (klik tutup)';
color: red;
}
ul#master {margin: 0;}
ul#master > li:first-child:before {display: none;}
ul#master > li:first-child {margin-top: 0}
input + label + ul {display: none;}
input:checked + label + ul {display: block;}
</style>

<ul id="master">
<li><input type="checkbox" id="users" checked="checked"><label for="users">Home</label>
<ul>
<li><input type="checkbox" id="Bra"><label for="Bra">Lists</label>
<ul>
<li><input type="checkbox" id="Document"><label for="Document">Documents</label>
<ul>
<li>2007 Taxes.pdf</li>
<li>Letter to Collection Agency.doc</li>
<li><input type="checkbox" id="Microsoft"><label for="Microsoft">Microsoft User Data</label>
<ul>
<li>Normal.dot</li>
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" id="Picture"><label for="Picture">Pictures</label>
<ul>
<li>IMGP1.jpg</li>
<li>IMGP2.jpg</li>
<li>IMGP3.jpg</li>
<li>IMGP4.jpg</li>
<li>IMGP5.jpg</li>
<li><input type="checkbox" id="Flower"><label for="Flower">Flowers</label>
<ul>
<li>Rose.jpg</li>
<li>Daisy.jpeg</li>
<li>Tulip.jpeg</li>
<li>Pansy.jpeg</li>
<li>Raflesia.jpg</li>
</ul>
</li>
<li><input type="checkbox" id="Por"><label for="Por">Porn</label>
<ul>
<li>xxx.jpg</li>
<li>xxx.gif</li>
<li>xxx.bmp</li>
<li>xxx.png</li>
<li>xxx.porn</li>
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" id="Site"><label for="Site">Sites</label>
<ul>
<li>index.html</li>
<li><input type="checkbox" id="image"><label for="image">images</label>
<ul>
<li>logo.gif</li>
<li>pictureOfMe.jpeg</li>
</ul>
</li>
<li><input type="checkbox" id="include"><label for="include">includes</label>
<ul>
<li>style.css</li>
<li>utilities.js</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" id="Share"><label for="Share">Shared</label>
<ul>
<li>Sharing is good.</li>
<li>Why I don't share.</li>
<li>But I will share this technique</li>
</ul>
</li>
</ul>
</li>
</ul>

Serupa:
http://www.thecssninja.com/css/css-tree-menu
Terima kasih, semoga sesuatu ya :)
Don't forget to ngacak-ngacak webnya \m/