Cara membuat menu drop down terpecah di blog

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. 

View Demo

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..!

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 14.20