Membuat Drop Down Navigation Menu

Sejak 3 bulan lalu saya mau posting cara membuat menu horizontal ala Drop Down Navigation Menu , tapi dasar pelupa…. Waktu itu saya menggunakan menu ini di Saung Web sebelum ganti dengan template ini dan baru sekarang ingat lagi ketika buka2 file tentang bahan postingan di computer ku, .. so lebih baik terlambat dari pada tidak sama sekali gitu kata pepatah.

Langsung saja kita meluncur dan bagi yang berminat silahkan Membuat Drop Down Navigation Menu , contoh jadinya bisa dilihat pada Saung Bisnisku. Caranya seperti ini :

1. Masuk ke Dashboard, lalu klik Layout dan Edit HTML.
2. Down Load dulu Template anda sebagai Backup.. .
3. Copy kode dibawah ini dan paste sebelum kode </head> .

   <script src='http://stubb.fanatic.googlepages.com/chrome.js' type='text/javascript'/>

4. Down Load salah satu code dibawah ini dan nanti simpan sebelum : ]]></b:skin>

   a. CSS style 1: klik di sini untuk download kode

   b. CSS style 2: klik di sini untuk download kode.

   c. CSS style 3: klik di sini untuk download kode

   d. CSS style 4: klik di sini untuk download kode

5. Kalau gadget ini mau disimpan di bagian paling atas atau header , maka cari dulu kode warna merah terus ganti dengan kode warna biru :

   
   <b:section class="header" id="header" maxwidgets="1" showaddelement="no">

   <b:section class="header" id="header" maxwidgets="10" showaddelement="yes">

6. Setelah itu jangan lupa Save Template

7. Selanjutnya masuk ke Add page element trus klik HTML/Javascript. Kemudian masukan kode ini :

   <div id="chromemenu" class="chromestyle"><ul>
   <li><a href="link1" title="judul1">Link1</a></li>
   <li><a href="#" rel="dropmenu1" title="judul2">Link2</a></li>
   <li><a href="#" rel="dropmenu2" title="judul3">Link3</a></li>
   <li><a href="link2" title="judul4">Link4</a></li>
   </ul>
   </div>
   <!--1st drop down menu -->
   <div id="dropmenu1" style="width: 150px;" class="dropmenudiv">
   <a href="Alamatlink2.1" title="subJudul2.1">Link2.1<a>
   <a href="Alamatlink2.2" title="subJudul2.2">Link2.2</a>
   <a href="Alamatlink2.3" title="subJudul2.3">Link2.3</a>
   </div>
   <!--2nd drop down menu -->
   <div id="dropmenu2" style="width: 150px;" class="dropmenudiv">
   <a href="Alamatlink3.1" title="subJudul3.1">Nama3.1</a>
   <a href="Alamatlink3.2" title="subJudul3.2">Nama3.2</a>
   <a href="Alamatlink3.3" title="subJudul3.3">Nama3.3</a>
   </div>
   <script type="text/javascript">
   cssdropdown.startchrome("chromemenu")
   </script>

   Jika udah segera di Save dan lihat hasilnya, selanjutnya tinggal sesuaikan dengan selera anda caranya tinggal edit aja kode warna merah diatas.

   Contoh yang saya pakai bisa dilihat disini

   Source : Topijrami