Membuat Menu Navigasi Jquery Multilevel Dropdown Menu


Assalamualaikum Sahabat Anak Smanda, Kali Ini Anak Smanda 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 Anak Smanda :

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(http://1.bp.blogspot.com/_4HKUHirY_2U/TQRpk9F_oEI/AAAAAAAAJSc/9nOnnVubv7c/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(http://1.bp.blogspot.com/_4HKUHirY_2U/TQRpk9F_oEI/AAAAAAAAJSc/9nOnnVubv7c/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 Muhammad_asri3@yahoo.com

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


Show comments
Hide comments

8 komentar

avatar

Ini ada contoh horizontal menu, vertical menu atau dropdown menu, tinggal download ajaa
www.designedmenus.blogspot.com

avatar

@ItsMe :
terima kasih sob atas link tautan nya,,
Dropdown menu nya sangat membantu + menu nya juga keren^^...
Siiip daaah

avatar

trims gan untuk tutorialnya. langsung di coba..

avatar

@Jam Tangan Tokyo Flash :
oke sob,,, Lanjutin aktifitasnya......

:: Keep Blogging ::

avatar

gan kok div id='menu-wrap'> ane cari ga ada ya.mohon pencerahannya

avatar

@iputuwira : Maaf saya sedikit terlambat, coba agan letakkan kodenya stelah kode berikut ini :
__________________________________
#div id='header'>

_______________________________________
:? :? :? :? :? :? :?

avatar

Ass . . .
Gan Kenapa Menu'y G Mau Buka,Kyk Menu Yg Biasa Aza . . .

avatar

:f Gan ada previewnya kagak

Apakah Anda mempunyai saran? Silakan Tambah komentar. Jangan spam!