›

Membuat Menu Navigasi Jquery Multilevel Dropdown Menu


anaksmanda.com -  Menu Dropdown adalah menu dengan sekumpulan tautan yang muncul kebawah ketika di scroll atau ketika kalian mengklik menu tersebut, dan daftar tersebut berfungsi untuk mengarah ke halaman link lain, baik dari web kita sendiri atau dari situs web lain.

Baiklah , Mari kita ikuti cara untuk membuat Menu Navigasi Dropdown, Ikuti Langkah Berikut ini :
  • Pertama-tama Masuk ke Account Blogger anda
  • Setelah berada di Account anda, Silahkan pilih Menu Rancangan lalu pilih Edit Html
  • Silakan Klik Download Template Lengkap terlebih dahulu untuk Jaga-jaga apabila terjadi kesalahan didalam pengeditan
  • Kemudian Centang Expand Template Widget
  •  Silakan Anda Cari kode </head>
  • Jika Sudah Ketemu Copy dan Paste kan Kode Script Berikut Tepat Diatasnya

 </script>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://izoelsdropdownmenu.googlecode.com/files/jqueryslidemenu.js' type='text/javascript'/>

  • Masih di halaman Edit Html, Anda Cari Lagi kode  ]]></b:skin> lalu pastekan kode Css Berikut Tepat di atasnya :
/* pengaturan utama */
.jqueryslidemenu{
font: bold 12px Verdana;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvQpGkGWKdIGhLYKh0L4sbalCAFcbrZ3gkGObSPPyHa3pKzgUFpd2IWDXpmzXUFYpyP858dMl2xrVo5vKCCD0JASAbcoFBfg8ptKqz5k-MTc6YtJLAqZvuDQ_CSnqtHXdXALXKv5OPKh07/s1600/top-menu.png) repeat-x; /*latar belakang horizontal menu*/
width: 100%;
}


.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
border: 1px solid #778;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvQpGkGWKdIGhLYKh0L4sbalCAFcbrZ3gkGObSPPyHa3pKzgUFpd2IWDXpmzXUFYpyP858dMl2xrVo5vKCCD0JASAbcoFBfg8ptKqz5k-MTc6YtJLAqZvuDQ_CSnqtHXdXALXKv5OPKh07/s1600/top-menu.png) repeat-x;;}


.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
border: 1px solid #778;}




.jqueryslidemenu ul li a{
display: block;
background: #414141; /*latar belakang menu horizontal menu dan dropdown menu*/
color: white;
padding: 8px 10px;
border: 1px solid #778;
color: #2d2b2b; /*warna garis tepi*/
text-decoration: none;
}


* html .jqueryslidemenu ul li a{
display: inline-block;
}


.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}


.jqueryslidemenu ul li a:hover{
background: black;
color: white;
}




.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}




.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}




.jqueryslidemenu ul li ul li ul{
top: 0;
}




.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0;
border: 1px solid gray;
}


/*pengaturah hover efect*/
.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;/*warna kotak ektika mouse di atas selected menu*/
color: black;
border: 1px solid gray;}






.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}


.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
  • Yang Terakhir Copy Kode Pemanggilan Script Berikut Di bawah atau Diatas Header Blog Anda, Cari Kode <div id='menu-wrap'>  Lalu Copy dan Pastekan Kode Pemanggilan Script Berikut Ini :
<!-- Multilevel Dropdown Menu -->


<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='http://www.anak-smanda.co.cc/'>Home </a></li>


<li><a href='#'>Artikel </a>
<ul>
<li><a href='http://www.anak-smanda.co.cc/search/label/Misteri'>Misteri </a></li>
<li><a href='http://www.anak-smanda.co.cc/search/label/Facebook'>Facebook </a></li>
<li><a href='http://www.anak-smanda.co.cc/search/label/Tips%20Trik'>Tips</a></li>
<li><a href='http://www.anak-smanda.co.cc/search/label/Islam'>Islami</a></li>
<li><a href='http://www.anak-smanda.co.cc/search/label/Kisah%20Mengharukan'>Kisah Mengharukan </a></li>
<li><a href='http://www.anak-smanda.co.cc/search/label/Humoris'>Humoris </a></li>
<li><a href='http://www.anak-smanda.co.cc/search/label/Cinta'>Cinta </a></li>
<li><a href='http://www.anak-smanda.co.cc/search/label/Artikel'>Kumpulan Artikel </a></li>
</ul>
</li>


<li><a href='#'>Tutorial </a>
<ul>
<li><a href='http://www.anak-smanda.co.cc/search/label/Tutorial%20Blog'>Blogspot </a></li>
<li><a href='http://www.anak-smanda.co.cc/search/label/Facebook'>Facebook </a></li>
</ul>
</li>


<li><a href='#'>Download </a>
<ul>
<li><a href='http://www.anak-smanda.co.cc/search/label/Software%20Download'>Software </a></li>
<li><a href='http://www.anak-smanda.co.cc/search/label/Film'>Film </a></li>
</ul>
</li>






<li><a href='#'>Tips Komputer </a>
<ul>
<li><a href='http://www.anak-smanda.co.cc/search/label/Software%20Download'>Tips Software </a></li>
<li><a href='http://www.anak-smanda.co.cc/search/label/Tips%20Komputer'>Tips Komputer </a></li>
</ul>
</li>
</ul>
<br style='clear: left'/>
</div>
<!-- /Multilevel Dropdown Menu -->

Langkah Ketiga :

Sebelum anda menyimpan hasil editan anda sebaiknya : 
  • Ganti tulisan yang berwarna Biru dengan Link Tujuan Anda
  • Ganti Tulisan Yang berwarna Merah dengan Nama Tampilan Link Tujuan Anda
Setelah selesai silakan Simpan Template anda 


Baiklah, Semua langkah sudah terselesaikan, Mungkin Teh hangat yang disediakan tadi juga telah selesai anda Nikmati dan Template Blog Anda pun Akan Semakin Menarik Dengan Tampilan Baru, 

Tetapi Apabila Ada yang kurang Anda Pahami, Silakan Kirim Komentar Di bawah Kolom Komentar Artikel ini, Atau Juga boleh Mengirim pertanyaan ke alamat blogger.anaksmanda@gmail.com

Selamat Mencoba.... !! ☺
Catatan : Apabila kesusahan dalam pencarian kode pada halaman Edit Html, sebaiknya Gunakan Menu Find dengan cara menekan Ctrl + F