MEMBUAT SUB SUB MENU DI BLOGGER

Postingan kali ini bercerita tentang sub menu atau dropdown menu dengan menggunakan CSS3, dari beberapa rekan yang baru saat ini bisa saya jawab.
Sebelumnya saya mohon maaf, dikarenakan banyaknya email dan pertanyaan yang masuk, yang mengakibatkan ada beberapa pertanyaan yang belum terjawab, mohon maklum adanya.


Saya akan coba buat dari dasar HTML sampai Customize sub menu-nya.
1. Hal pertama yang harus dilakukan adalah membuat kode HTML seperti dibawah ini.

<ul id="menuq">
    <li><a href="http;//www.karsono.co.cc">Home</a></li>
    <li><a href="#">About Me &gt;</a>
        <ul>
            <li><a href="http://id-id.facebook.com/people/karsono-sajah/1366190217" target="_blank">Facebook</a></li>   
            <li><a href="#">Profile &gt;</a>
    <ul>
                    <li><a href="http://id.linkedin.com/in/karsono" target="_blank">Linkedin</a></li>
                    <li><a href="http://www.visualcv.com/p1rx4tg" target="_blank">VisualCV</a></li>
               </ul>
   </li>
            <li><a href="http://twitter.com/karsono" target="_blank">Twitter</a></li>
        </ul>
    </li>
    <li><a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank">Email</a></li>
</ul>

dimana hasilnya akan terlihat seperti demo sub menu 1 disini.

2. Dalam demo tersebut kondisi dari menu masih berbentuk html standar, lalu saya akan coba tambahkan beberapa kode CSS yang akan menampilkan animasi dengan hover untuk menampilkan atau menyembunyikan list dari menu, kode CSS-nya:

#menuq { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#menuq li ul { display: none; }
#menuq li:hover ul{display: block; }
#menuq li:hover ul li ul{display: none; }
#menuq li ul li:hover ul { position:relative; top:-30px; left:8em; display: block; }
#menuq li ul li{ height: 30px; line-height: 30px; }

dimana hasilnya akan terbentuk seperti Demo sub menu 2 ini.

3. Dengan melihat hasil dari demo pada langkah kedua, berarti tinggal dibuat custom warna dari menu supaya menarik, caranya tinggal ditambahkan kode css menu dibawah

#menuq li { float: left; position: relative; padding: 0; line-height: 40px; background: #F6F5F1; }
#menuq li:hover { background-position: 0 -40px; }
#menuq li a { display: block; padding: 0 15px; color: #000; text-decoration: none; }
#menuq li a:hover { background:#CC716A; color: #fff; }
#menuq li ul { opacity: 0; position: absolute; left: 0; width: 8em; background:#CCD5E2; list-style-type: none; padding: 0; margin: 0; }
#menuq li:hover ul { opacity: 1; }
#menuq li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#menuq li:hover ul li { height: 30px; line-height: 30px; }
#menuq li ul li a { background: #F6F5F1; }
#menuq li ul li a:hover { background:#CC716A; }

sampai disini sub menu dengan css3 sudah berhasil dibuat, hasilnya bisa dilihat DEMO sub menu 3 disini.

4. Langkah keempat ini berbentuk pilihan, dimana kode CSS3 ini dibuat untuk menghasilkan animasi menu yang lebih menarik lagi, jadi gak dipake juga gak masalah, caranya tinggal ditambahkan saja kode seperti dibawah ini.

#menuq li { -webkit-transition: all 0.2s; }
#menuq li a { -webkit-transition: all 0.5s; }
#menuq li ul { -webkit-transition: all 1s; }
#menuq li ul li { -webkit-transition: height 0.5s; }

hasil dari sub menu ini, secara keseluruhan akan terlihat seperti DEMO sub menu disini.

sedangkan untuk kode-nya secara keseluruhan bisa langsung digunakan di blogger, pilih pada menu Design >> Page Elements >> Add a Gadget >> pilih HTML/Script dan pastekan kode dibawah ini tepat dibawah header.
Tentunya untuk penempatan harus disesuaikan dengan design dari template blog itu sendiri, jadi harus di custom lagi supaya letak dan posisinya pas dan sesuai dengan template blog yang ada.

<style type="text/css">
#menuq { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#menuq li ul { display: none; }
#menuq li:hover ul{display: block; }
#menuq li:hover ul li ul{display: none; }
#menuq li ul li:hover ul { position:relative; top:-30px; left:8em; display: block; }
#menuq li ul li{ height: 30px; line-height: 30px; }
#menuq li { float: left; position: relative; padding: 0; line-height: 40px; background: #F6F5F1; }
#menuq li:hover { background-position: 0 -40px; }
#menuq li a { display: block; padding: 0 15px; color: #000; text-decoration: none; }
#menuq li a:hover { background:#CC716A; color: #fff; }
#menuq li ul { opacity: 0; position: absolute; left: 0; width: 8em; background:#CCD5E2; list-style-type: none; padding: 0; margin: 0; }
#menuq li:hover ul { opacity: 1; }
#menuq li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#menuq li:hover ul li { height: 30px; line-height: 30px; }
#menuq li ul li a { background: #F6F5F1; }
#menuq li ul li a:hover { background:#CC716A; }
#menuq li { -webkit-transition: all 0.2s; }
#menuq li a { -webkit-transition: all 0.5s; }
#menuq li ul { -webkit-transition: all 1s; }
#menuq li ul li { -webkit-transition: height 0.5s; }
</style>

<ul id="menuq">
    <li><a href="http;//www.karsono.co.cc">Home</a></li>
    <li><a href="#">About Me &gt;</a>
        <ul>
            <li><a href="http://id-id.facebook.com/people/karsono-sajah/1366190217" target="_blank">Facebook</a></li>   
            <li><a href="#">Profile &gt;</a>
    <ul>
                    <li><a href="http://id.linkedin.com/in/karsono" target="_blank">Linkedin</a></li>
                    <li><a href="http://www.visualcv.com/p1rx4tg" target="_blank">VisualCV</a></li>
               </ul>
   </li>
            <li><a href="http://twitter.com/karsono" target="_blank">Twitter</a></li>
        </ul>
    </li>
    <li><a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank">Email</a></li>
</ul>

Artikel Terkait