Cara Membuat Dropdown Navigasi Blogspot

Satu lagi penerapan prinsip kerja slide panel (baca tutorialnya di sini). Di sini kita lebih memfokuskan kepada penerapan <ul> sebagai objek terpicu, sementara <img> sebagai pemicunya (lihat demo).

Untuk membuatnya, pertama-tama pastikan bahwa blogmu sudah memiliki salah satu dari script ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Jika sudah ketemu, kita langsung masuk ke langkah dua (jika tidak ketemu, salinlah kode tersebut dan letakkan di atas </head>).
Berikutnya salin kode ini, kemudian letakkan di bawah kode tadi:

<script type="text/javascript">
    $(document).ready(function() {
        $('ul.menu_awak li:even').addClass("alt");
        $('.menu_ndhas').click(function () {
            $('ul.menu_awak').slideToggle('normal');
        });
        $('ul.menu_awak li a').mouseover(function() {
            $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
        });
        $('ul.menu_awak li a').mouseout(function() {
            $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
        });
    });
</script>

Lalu letakkan kode pemodel ini di atas </style> atau ]]></b:skin>:

.menu_ndhas           {border:1px solid #998675;}
.menu_awak            {display:none;width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;margin:0px 0px;padding:0px 0px;}
.menu_awak li         {background:#493e3b;list-style:none;margin:0px 0px;padding:0px 0px;}
.menu_awak li.alt     {background:#362f2d;}
.menu_awak li a       {color:#FFFFFF;text-decoration:none;padding:10px; display:block;}
.menu_awak li a:hover {padding:15px 10px;font-weight:bold;}

Nah, sekarang kita tinggal menempatkan kerangkanya saja di tempat yang kamu inginkan:

<img class='menu_ndhas' height='32' src='http://1.bp.blogspot.com/-v1gLRs4wDq4/ThJzVsSsbaI/AAAAAAAAAWM/cVxrI8haoOg/s1600/navigate.png' width='184' />
<ul class='menu_awak'>
    <li><a href='#'>Andai</a></li>
    <li><a href='#'>Saja</a></li>
    <li><a href='#'>Engkau</a></li>
    <li><a href='#'>Tahu</a></li>
    <li><a href='#'>Bahwa</a></li>
    <li><a href='#'>Aku</a></li>
    <li><a href='#'>Sangat</a></li>
    <li><a href='#'>Mencintaimu</a></li>
</ul>

Klik Simpan Template dan lihat hasilnya.

Pemahaman Lebih Lanjut:

• Perhatikan baris kode ini:
  
  

  <script type="text/javascript">
      $(document).ready(function() {
          $('ul.menu_awak li:even').addClass("alt");
          $('.menu_ndhas').click(function() {
              $('ul.menu_awak').slideToggle('normal');
          });
          $('ul.menu_awak li a').mouseover(function() {
              $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
          });
          $('ul.menu_awak li a').mouseout(function() {
              $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
          });
      });
  </script>

  
  Kita telah tahu bahwa kode $('ul.menu_awak').slideToggle('normal'); telah kita temui dalam pembuatan slide panel.
• Kode ... .animate({ fontSize: "14px", paddingLeft: "20px" }, 50 ); ...}); juga telah kita temui dalam pembuatan efek hover gambar artistik dengan JQuery. Hanya saja, untuk tutorial ini, properti yang dianimasikan bukan lagi opacity, melainkan font-size dan padding-leftnya.
  Yang Saya agak bingung, kode fontSize dan paddingLeft tidak lagi menggunakan dash (-) sebagai pemisah seperti halnya dalam CSS.
• Sedangkan kode $('ul.menu_awak li:even').addClass("alt"); digunakan untuk membuat efek list berwarna selang-seling secara otomatis (pelajari di sini).
• Dan ini adalah gambar yang kamu perlukan untuk praktek kita:
  
  

Sumber: HompimpaAlaihumGambreng