Canda Blogs: Cara Membuat Menu Horizontal Dropdown dengan jQuery

Rabu, 06 Juni 2012

Cara Membuat Menu Horizontal Dropdown dengan jQuery

Cara Membuat Menu Horizontal Dropdown dengan jQuery - Setelah kemarin saya telah membahas widget Facebook Rekomendasi. Kali ini saya akan membahas tutorial blogger yaitu Cara Membuat Menu Horizontal Dropdown dengan jQuery. Berbeda dengan Menu Horizontal Dropdown lainnya, blia di klik tanda panah yang ada pada menunya maka menu dropdownnya akan terbuka. Silahkan lihat tutorialnya dibwah ini :

Langkah Pertama :

1. Login ke Blogger sobat (bila belum login)

2. Pilih menu Rancangan => Edit HTML => lalu centang Expand Template Widget

3. Cari kode </head>, bila sudah copy kode dibawah ini tepat diatas/sebelum kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("ul.subnav").parent().append("<span/>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
<style type='text/css'>
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 1.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA9EWnVojIL80WRCai_tmStGLDcGOX-Y7POxv42ZUPibckrAj_fj-zU6U0vzvhZLnVMaye99T678xufD7T0ns2fYFh3b3tVvme93qD3Ba-qEW54YLr86BLfe1NDPa97zyGB-u31ZBVif0y/) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8O4L80-NHhbLdmRQiL8xEdH5eXV65Vq42aZLmXvgSmHdfNAnwXBLvWIBqxSZffcS1h-_iHPiWOcBGF11wntI7-EWiwzfUyJ4u2bIqhgn2ktkdasyQkG6I4M08ntH03i_aAHNIbrpEgoVu/) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0X7P7eNSn3VVMxRGSDW1VzShoOZJt0dXaqoeHF7-U72nKpTj6ZBytHehbSu6sYLLTXrGxfCANg572Xt0X9V5KtXav5ovgpGT51gtkK0ypZsbq8L9ZSq6rHLa7zax6rAiElg4CxJDOCr2M/) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0RgV9-mc_iRws_bec3DJUUPZC4RlRNxwdKIjpR229484uHZZge8iogxmM6gfr1sybmDpbuwGLGY2W8oF_kc8ks0-itbmly4uLk8-KAbfMrDwdpl97p2dVvwcus_cj6bhmvfUP4ukbPTGX/) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0RgV9-mc_iRws_bec3DJUUPZC4RlRNxwdKIjpR229484uHZZge8iogxmM6gfr1sybmDpbuwGLGY2W8oF_kc8ks0-itbmly4uLk8-KAbfMrDwdpl97p2dVvwcus_cj6bhmvfUP4ukbPTGX/) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>

Ket: ganti yang berwarna merah sesuaikan dengan lebar menu dropdownnya

4. Simpan Template

Langkah kedua :

1. Kembali, sobat Pilih menu Rancangan => Tata letak => Tambah Gadget

2. letakkan kode dibawah ini di HTML/JavaScript

<ul class="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">HTML Tutorials</a></li>
<li><a href="#">CSS Tutorials</a></li>
<li><a href="#">PHP Tutorials</a></li>
<li><a href="#">SQL Tutorials</a></li>
<li><a href="#">jQuery Tutorials</a></li>
</ul>
</li>
<li>
<a href="#">Templates</a>
<ul class="subnav">
<li><a href="#">1 Column</a></li>
<li><a href="#">2 Column</a></li>
<li><a href="#">3 Column</a></li>
<li><a href="#">4 Column</a></li>
<li><a href="#">Premium</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Contact Us</a></li>
</ul>