Rabu, 09 Mei 2012

Cara Membuat Menu Horizontal Drop Down Dengan jQuery


By on 17.35

Cara Membuat Menu Horizontal Drop Down Dengan jQuery - Kali ini saya akan membahas tentang dunia Blogger, yaitu Cara Membuat Menu Horizontal Drop Down Dengan jQuery dalam posting sebelumnya saya sudah sering membahas bagaimana cara membuat menu horizontal drop down, tapi kali ini disini saya memakai jQuery untuk menciptakan Animasi pada Drop Down, saat di klik tanda panah yang ada pada menu nya maka menu Drop Down nya akan terbuka. Penasaran bagaimana Cara membuat nya silahkan ikuti langkah-langkah di bawah ini.

1. Log in ke Blog kamu.
2. Pilih Rancangan,
3. Pilih Edit HTML.
4. Cari kode </head> setelah ketemu letakan kode di bawah ini tepat di atas 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(){
$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //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(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});
});
</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(http://1.bp.blogspot.com/_4HKUHirY_2U/SuvG9uqdygI/AAAAAAAAAGg/RGkds76x-Ks/topnav_bg.gif) 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(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHEn2GZ9I/AAAAAAAAAGo/s4ncczdnOd0/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHKqBeOXI/AAAAAAAAAGw/qGYlY4ckLWc/subnav_btn.gif) 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(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>
Ganti kode yang berwarna merah, sesuai kan lebar nya bisa kamu ubah dari width:100%; menjadi width:980px; dan sebagainya sesuaikan saja lebar nya dengan blog anda.

Selanjutnya simpan template.

Kembali kemenu awal Rancangan pilih Add Gadget > Pilih HTML/Java Script, dan copy kode di bawah ini dan letakan gadget tersebut tepat di bawah header.
<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>
Ganti tanda # dengan URL yang dituju.
Simpan dan lihat hasilnya.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

13 komentar:

  1. thanks gan artikel cara membuat menu drop downnya.
    lam sukses selalu.

    BalasHapus
  2. gan,setelah ane copas koq waktu klik tombol wrn hijau menu drop down na gak muncul

    mohon pencerahannya

    sebelumnya saya ucapkan banyak terima kasih

    BalasHapus
  3. sama nih saya kak yg di atas..
    setelah di klik tombol warna ijo ..
    gk keluar,,

    pencerahan kaka admin

    BalasHapus
  4. Kalau menu ini, menurut saya sesuai percobaan, di klik yang hijaunya keluar sih keluar sub menu nya naum ketutup lagi, jadi saya lagi cari solusinya. Cari saja menu yang lain masih banyak kok yang ada di Blazer Blog.

    BalasHapus
  5. waahh Nice info... :)
    Makasih ya informasi'y

    jangan lupa mampir kesini ya..
    http://quantamultimedia.com/


    terimakasih ^_^

    BalasHapus
  6. Postingan yang Sangat bagus dan menarik untuk dibaca tentang cara membuat menu horizontal drop down.... Saya suka mengunjungi blog ini.

    BalasHapus
  7. Simple & keren sob...

    Jangan lupa visit back Blog Saya Gan, Thank's.

    BalasHapus
  8. wah saya coba ya thank bos
    salam plakattrophy.net

    hanya copas ajakan ??

    BalasHapus
  9. terima kasih gan infonya bermanfaat sekali buat orang banyak khususnya buat saya

    salam pengrajin plakat akrilik di jakarta

    BalasHapus
  10. Kalau menu ini, menurut saya sesuai percobaan, di klik yang hijaunya keluar sih keluar sub menu nya naum ketutup lagi, jadi saya lagi cari solusinya. Cari saja menu yang lain masih banyak kok yang ada di Blazer Blog.

    BalasHapus