Membuat Menu Navigasi Jquery Multilevel Dropdown Menu

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Assalamualaikum , Nah Ini ada artikel/tips bagus dan Kali Ini (dikutip dari SINI) akan Membagikan tips membuat Menu Navigasi Dropdown dengan effect jquery, membuat menu dropdown sangatlah mudah hanya melewati 3 langkah saja. 

Baiklah , Mari kita ikuti cara untuk membuat Menu Navigasi Dropdown, Ikuti Langkah Berikut ini ya sobat-sobat  :

Langkah Pertama :

Seperti Biasa, marilah kita berdoa terlebih dahulu kepada Allah SWT untuk keberhasilan, karena tiada keberhasilan yang benar-benar berhasil tanpa doa.  (Berdoa Mulai......... )   (Berdoa Selesai....)

Langkah Kedua :

Baiklah, Disini kita akan membahas tata cara pembuatannya ikuti petunjuk-petunjuk 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/AVvXsEinU7co9oBihxrLyc5fWeIo23MGuxZE6GbT-AlUVLvcvDDhFs-VCUUw0lNUkqdWgstGGENnCYaaRaPE3cxb3pgkeRQ73X1JW-hdtR3cEMsOE_hcZkqSIzfFtA_fF2DJVlUskfWvDun4gmyk/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/AVvXsEinU7co9oBihxrLyc5fWeIo23MGuxZE6GbT-AlUVLvcvDDhFs-VCUUw0lNUkqdWgstGGENnCYaaRaPE3cxb3pgkeRQ73X1JW-hdtR3cEMsOE_hcZkqSIzfFtA_fF2DJVlUskfWvDun4gmyk/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://kodim-0701.blogspot.com/'>Home </a></li>

<li><a href='#'>Artikel </a>
<ul>
<li><a href='http://kodim-0701.blogspot.com/search/label/Misteri'>Misteri </a></li>
<li><a href='http://kodim-0701.blogspot.com/search/label/Facebook'>Facebook </a></li>
<li><a href='http://kodim-0701.blogspot.com/search/label/Tips%20Trik'>Tips</a></li>
<li><a href='http://kodim-0701.blogspot.com/search/label/Islam'>Islami</a></li>
<li><a href='http://kodim-0701.blogspot.com/search/label/Kisah%20Mengharukan'>Kisah Mengharukan </a></li>
<li><a href='http://http://kodim-0701.blogspot.com/search/label/Humoris'>Humoris </a></li>
<li><a href='http://kodim-0701.blogspot.com/search/label/Cinta'>Cinta </a></li>
<li><a href='http://kodim-0701.blogspot.com/search/label/Artikel'>Kumpulan Artikel </a></li>
</ul>
</li>

<li><a href='#'>Tutorial </a>
<ul>
<li><a href='http://kodim-0701.blogspot.com/search/label/Tutorial%20Blog'>Blogspot </a></li>
<li><a href='http://kodim-0701.blogspot.com/search/label/Facebook'>Facebook </a></li>
</ul>
</li>

<li><a href='#'>Download </a>
<ul>
<li><a href='http://kodim-0701.blogspot.com/search/label/Software%20Download'>Software </a></li>
<li><a href='http://kodim-0701.blogspot.com/search/label/Film'>Film </a></li>
</ul>
</li>



<li><a href='#'>Tips Komputer </a>
<ul>
<li><a href='http://kodim-0701.blogspot.com/search/label/Software%20Download'>Tips Software </a></li>
<li><a href='http://kodim-0701.blogspot.com/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, 

Selamat Mencoba.... !! ☺

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين