Membuat Drop Down Navigation Menu

Langsung saja kita meluncur dan bagi yang berminat silahkan Membuat Drop Down Navigation Menu , 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.

Artikel Terkait