Dengan menggunakan kombinasi selektor dari CSS2, pseudo classes, CSS3 transisi, ditambah Java Script, akhirnya kita capai tombol menu yang terpecah/terpisah berbasis CSS. Konten yang dihasilkan pada tombol menu di sebelah kanan sangat dinamis menggunakan CSS2. Sedangkan Java Script disini hanya digunakan untuk mengaktifkan kotak centang / tombol arah bawah, secara menyeluruh dan dinamis.
KODE CSS DAN CARA MENAMBAHKAN MENUNYA DI BLOG
- Silahkan anda lihat kode CSS Disini
- Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
- Kemudian pilih -> Template -> Edit HTML
- Cari tag/kode ]]></b:skin> tekan CTRL + F untuk memudahkan pencarian
- Berikutnya pastekan kode CSS tepat diatas tag ]]></b:skin>
- Simpan template...
- Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript
- Pastekan kode berikut di bawah ini didalamnya:
<div class="css3splitmenu">
<a href="#">Blogging</a> <input type="checkbox" />
<ul id="t">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan trik blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">Blog tutorial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery java script</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">Gadget</a></li>
</ul>
</div>
<div class="css3splitmenu">
<a href="#">Dunia spiritual</a> <input type="checkbox" />
<ul>
<li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual" >Wawasan spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">Suluk</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">Sejarah</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/babad">Babad</a></li>
</ul>
</div>
<div class="css3splitmenu nocss3splitmenu">
<a href="http://jalu-pangna.blogspot.com/search/label/jejaring%20sosial">Jejaring sosial</a>
</div>
<!-- Script below should follow all split menus -->
<script type="text/javascript">
( function(){ // local scope
if (!document.querySelectorAll || !document.addEventListener)
return
var uls = document.querySelectorAll('div.css3splitmenu > ul'),
docbody = document.documentElement || document.body,
checkboxes = document.querySelectorAll('div.css3splitmenu > input[type="checkbox"]'),
zindexvalue = 100
for (var i=0; i<uls.length; i++){
( function(x){ // closure to capture each i value
checkboxes[i].addEventListener('click', function(e){
uls[x].style.zIndex = ++zindexvalue
for (var y=0; y<uls.length; y++){ // loop through checkboxes other than current and uncheck them (since Chrome doesn't respond to onblur event on checkboxes)
if (y != x)
checkboxes[y].checked = false
}
e.cancelBubble = true
})
checkboxes[i].addEventListener('blur', function(e){
setTimeout(function(){checkboxes[x].checked = false}, 100) // delay before menu closes, for Opera's sake (otherwise links are un-navigatable)
e.cancelBubble = true
})
}) (i)
}
docbody.addEventListener('click', function(e){
for (var i=0; i<uls.length; i++){
checkboxes[i].checked = false
}
})
})();
</script>
- Silahkan Ganti link warna kuning dengan URL/Link anda
- Ganti judul Menu sesuai dengan yang anda inginkan
- Ganti judul Sub Menu sesuai Sub Menu yang di inginkan
- Simpan Gadget dan lihat hasilnya...
CATATAN:
Untuk menambahkan tombol menu dan sub menu, tambahkan tag DIV dengan tag class="css3splitmenu dan menambahkan 3 element berikut:
<div class="css3splitmenu">
<a href="Link anda">Judul Menu</a> <input type="checkbox" />
<ul>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
</ul>
</div>
Mohon maaf kalau ada kekurangan dan kesalahan...
Semoga bermanfa'at and Keep blogging..!