Membuat Navigasi Dropdown dengan jQuery

Dropdown biasa digunakan untuk memunculkan daftar link dari kategori induknya atau dapat juga yang lainnya.  Kelebihan dari navigasi dropdown ini adalah terlihat lebih menarik bagi user,  juga dapat memperindah desain website.

Jika penasaran untuk mencobanya, anda dapat mendownload sourcenya dulu sebelum menuju tutorial.

Link : source code [24.33 KB]

Tutorial ini akan menjelaskan bagaimana membuat navigasi dropdown sederhana dengan 3 komponen utama yaitu HTML, CSS, dan Javascript. Komponen Javascript menggunakan framework jQuery.

1. HTML
   kode :

   <ul class="navigasi">
       	<li><a href="http://iruha91.blogspot.com/">Home</a></li>
           <li>
           <a id="dd_trigger" href="#">Blog
              <span>
                 <img src="image/DownArrow.gif" alt="" />
                 </span>
              </a>
              <ul id="dd_kontainer">
               	<li><a href="#">Edukasi</a></li>
                   <li><a href="#">Hiburan</a></li>
               	<li><a href="#">Life Style</a></li>
                   <li><a href="#">Teknologi</a></li>
               </ul>
           </li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
    </ul>
   

   
   Penjelasan :
   
   • Membuat struktur list Navigasi dengan menggunakan tag <ul> , <li>, dan <a>
   • Pilih list yang akan menjadi Parent dari kategori dropdown dan beri id atau class pada link nya.(dalam hal ini adalah Blog diberi id = dd_trigger)
   • Membuat List kategori dengan tag <ul>,<li>,<a> di dalam list yang diinginkan(idalam list Blog dan kontainer listnya diberi id = id dd_kontainer
   • Tujuan pemberian id pada komponen HTML dersebut adalah untuk dapat diakses css dan sebagai selektor di javascript
   
   
2. CSS
   Kode:
   

   ul#dd_kontainer{
   	position:absolute;
   	display:none;
   }
   

   Penjelasan:
   

   • Kode diatas adalah potongan kode css yang berpengaruh langsung pada pembuatan dropdown. Sementara untuk kode css lainnya dapat anda modifikasi tanpa berpengaruh ke mekanisme dropdown.
   • dd_kontainer akan diset awal untuk tidak terlihat yaitu dengan kode display:none
   • dd_kontainer nantinya akan melakukan animasi dropdown yang dapat mempengaruhi ukuran dari kontainer parent nya. Oleh karena itu posisinya diset supaya saat terjadi animasi dropdown tidak akan mempengaruhi ukuran kontainer parent nya yaitu dengan kode position:absolute
   
   
3. jQuery
   
   Tutorial ini menggunkan framework jQuery, bagi anda yang baru mengenal jQuery, dapat mempelajarinya secara lengkap disini.
   Sebelum menulis kode jQuery, web harus memuat file jQuery (sudah ada pada source code) untuk menggunaan kode jQuery. Jika file ini tidak dimuat, web tidak akan mengenali sintax yang didefinisikan oleh jQuery dan hanya akan mengenali sintax javascript biasa. Oleh karena itu, muat dahulu file jQuery seperti berikut :

   <script type="text/javascript" src="Js/jquery.js"></script> 

   Untuk memulai menggunakan sintax dari jQuery, buat tag <script> baru dan tulis kode dibawah:
   

   $(document).ready(function(){           
       // tulis kode disini
   });
   

   Selanjutnya letakkan kode simple untuk animasi dropdown dibawah ini didalamnya(di tempat komentar "//").
   

   var waktu = 300;
   $('a#dd_trigger').click(function(){
           $('ul#dd_kontainer').slideToggle(waktu)
           })
   

   Penjelasan :
   Urutan Logika animasi :
   1. Link dengan id = dd_trigger di klik
      

      $('a#dd_trigger').click(function(){ 
              // isi dengan kode aksi yang diinginkan(langkah 2)
          })
      

      
      fungsi .click() bekerja saat komponen ini di klik, aksi akan dilakukan.
      
      
   2. Kontianer dengan id = dd_kontainer akan muncul dan melakukan animasi dropdown.
      

       $('ul#dd_kontainer').slideToggle(waktu)

      
      
      fungsi dari .slideToggle() adalah untuk menjalankan sliding animasi dangan sifat saling berkebalikan. Yaitu saat link diklik lagi, maka akan melakukan animasi kebalikannya. Variabel waktu adalah lamanya durasi animasi, dainyatakan dalam milisecon.

Sekian penjelasan singkat dan sederhana ini, semoga bermanfaat.

Link : source code [24.33 KB]