Cara Membuat Menu navigasi dengan jQuery

Hallo sobat TKJ kali ini saya akan membahas tentang Cara Membuat Menu navigasi yang keren dengan jQuery, sebenar nya sih sudah banyak Tutorial seperti ini, namun ya niat saya hanya ingin membantu orang-orang yang belum bisa memasang menu navigasi yang keren dengan jQuery di blog untuk Priview nya anda bisa melihat gambar di bawah ini

Ok langsung saja ke cara pembuatan nya >>>>

Pertama Login ke blog anda, setelah itu masuk ke Edit HTML anda, lalu copy script di bawah letakkan di atas code ]]></b:skin>

#menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQLxYK0x7VMEUQWIvk6JGWGYZTWC4AgAq6-q_6bJyrOIUM7fbYNqNL8Ij8eiyAaW_w_na9NCK9lnpWuIkneTBFcyjFI0VRLTVPXEAlSv9Tly63nXf3EQhOpUFHS89VMDDYksM4t6V32_n8/s1600/menu_bg.gif);
font:normal 18px/36px Arial, Helvetica, sans-serif;
float:left;
width:980px;
padding:0;
}
#menu li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQLxYK0x7VMEUQWIvk6JGWGYZTWC4AgAq6-q_6bJyrOIUM7fbYNqNL8Ij8eiyAaW_w_na9NCK9lnpWuIkneTBFcyjFI0VRLTVPXEAlSv9Tly63nXf3EQhOpUFHS89VMDDYksM4t6V32_n8/s1600/menu_bg.gif);
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}
#menu li a{
color:#bfbfbf;
text-decoration:none;
padding-left:15px;
padding-right:10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQLxYK0x7VMEUQWIvk6JGWGYZTWC4AgAq6-q_6bJyrOIUM7fbYNqNL8Ij8eiyAaW_w_na9NCK9lnpWuIkneTBFcyjFI0VRLTVPXEAlSv9Tly63nXf3EQhOpUFHS89VMDDYksM4t6V32_n8/s1600/menu_bg.gif);
display:block;
float:left;
}
#menu li span{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtexhfxI3swps8Kxs76-Rqd6XUfZk5NhRDoFYQr5GNWESEfG7GM35k4hUCXNx4w9z0sqC4nkB_0yks3K0-DZv21CvbJIZOEnFqttj6gLCIQFSg7t-9O7hKavth1916gjtimU0ndvYXhQCo/s1600/arrow.png) no-repeat 0 12px ;
width:20px;
height:35px;
/*display:inline-block;*/
float:left;
/*top:-35px;*/
/*position:relative;*/
cursor:pointer;
}
#menu li ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7rcvDfHRAdRH-3w8r7xTwXdP9atE1wNIuh7m19GEII76ezbemOjwfftILktr9K3ZnehB9wue5raCjrZoebZ2w1zsxGFz4_SUHHG_Q3Cm6uSvZWbA6kCerRAMOgq7iE-QlWzREx2IxTBr/s1600/submenu_bg.gif) no-repeat right bottom;
padding:0;
font-size:15px;
display:none;
width:250px;
z-index:5;
position:absolute;
margin:0;
float:left;
left:0;
top:36px;
}
#menu li ul li{
background:none;
width:250px;
overflow:hidden;
line-height:25px;
}
#menu li ul a{
background-image:none;
border-bottom:1px solid #171717;
border-top:1px solid #545454;
border-left:1px solid #171717;
width:237px;
}
#menu li:hover ul{
}
a:active, a:visited {
outline:none;
}
.overRed {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvtE73BXEZ_DMgnwmhwMVFwn6e6rwPOtXohWW0b0OHDLVf6q5_L4Z731XNM6I_LvOgPM5cDvu4MZEIXjoQwIlztffahxfQHDI56T9INP9y0mVPszrZgooyAw1rceZKtC1kKXt68RvZ28pU/s1600/over_red.png) no-repeat left top !important;
color:#FFFFFF !important;
border-left:none !important;
border-right:none !important;
}

Lalu copy code di bawah ini diatas code </head> namun jika sudah ada code jQuery 1.6.1,js nya jangan di copy lagi code nya ya <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("ul.submenu").parent().append("<span></span>");
$("ul#menu li a, ul#menu li span").click(function(){
$(this).parent().find("ul.submenu").animate({height: 'show', opacity: 'show'}, 'slow');
})
$("ul#menu li").not("ul#menu li ul li").hover(function(){
}, function(){
$(".submenu").animate({height: 'hide', opacity: 'hide'}, 'slow');
})
$(".submenu li a").hover(function(){
$(this).animate({paddingLeft: "30px"}, 'fast') ;
$(this).addClass("overRed") ;
},
function(){
$(this).animate({paddingLeft: "15px"}, 'fast') ;
$(this).removeClass("overRed") ;
}
)
})
</script>

Ok setelah itu Save,....
Eits belum selesai bro, ini saat nya kita menentukan apa2 saja menu nya, dan dimana di letakkan, anda bisa letakkan di gedget Hearder atau dimana juga terserah kamu yang penting enak ngelihat nya
ini script nya

<ul id='menu'>
<li><a href='alamat blog kamu'>Home</a></li>
<li><a href='#'>Top</a>
<ul class='submenu'>
<li><a href='#'>Design</a></li>
<li><a href='#'>Development</a></li>
<li><a href='#'>Freebies</a></li>
<li><a href='#'>Inspiration</a></li>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Tutorials</a></li>
<li><a href='#'>Wordpress</a></li>
</ul>
</li>
<li><a href='#'>Lifestyle</a>
<ul class='submenu'>
<li><a href='#'>Food</a></li>
<li><a href='#'>Health</a></li>
<li><a href='#'>Travelling</a></li>
</ul>
</li>
<li><a href='#'>Entertainment</a>
<ul class='submenu'>
<li><a href='#'>Celebs</a></li>
<li><a href='#'>Music</a></li>
<li><a href='#'>Movie</a></li>
</ul>
</li>
<li><a href='#'>News</a>
<ul class='submenu'>
<li><a href='#'>Nasional</a></li>
<li><a href='#'>Internasional</a></li>
<li><a href='#'>Indonesiaku</a></li>
</ul>
</li>
<li><a href='#'>Sports</a>
<ul class='submenu'>
<li><a href='#'>Sepakbola</a></li>
<li><a href='#'>Basket</a></li>
<li><a href='#'>MotoGP</a></li>
</ul>
</li>
<li><a href='#'>Download</a>
<ul class='submenu'>
<li><a href='#'>Mp3</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Movie</a></li>
</ul>
</li>
<li><a href='#'>Technology</a>
<ul class='submenu'>
<li><a href='#'>Gadget</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Computer</a></li>
<li><a href='#'>Handphone</a></li>
</ul>
</li>
<li><a href='#'>Blogger</a>
<ul class='submenu'>
<li><a href='#'>Tips Blog</a></li>
<li><a href='#'>Tutorial Blog</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>jQuery</a></li>
</ul>
</li>
</ul>

Selesai deh.... dan semoga berhasil jangan lupa komentar nya :)