..:: Animated Drop Down Menu with jQuery ::..

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/* ---------------
Animated Drop Down Menu with jQuery
---------------------------------- */
 ul, li .menu_head{
     margin:0; padding:0;
     list-style:none;
     }

.menu_head{
    border:1px solid #998675;
    }

.menu_body {
    display:none;
    width:184px;border-right:1px solid #998675;
    border-bottom:1px solid #998675;
    border-left:1px solid #998675;
    }
.menu_body li{
    background:#493e3b;
    }
.menu_body li.alt{
    background:#362f2d;
    }
.menu_body li a{
    color:#FFFFFF;
    text-decoration:none; padding:10px;
    display:block;
    }
.menu_body li a:hover{
    padding:15px 10px; font-weight:bold;
    }

selanjutnya simpan script berikut diatas kode </head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').click(function () {
    $('ul.menu_body').slideToggle('medium');
    });
    $('ul.menu_body li a').mouseover(function () {
    $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
    $('ul.menu_body li a').mouseout(function () {
    $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
</script>

terakhir cara pemanggilannya pada Html  :

<img src="http://dimash.waphall.com/navigate.png" width="184" height="32" class="menu_head" />
<ul class="menu_body">
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

selesai... jangan lupa simpan template...
Catatan : Untuk script jquery yang diberi warna Biru ; jika sudah ada, tidak perlu ditambahkan lagi

Semoga berhasil dengan tutor jquery ini, karena memang terkadang penerapan jquery selalu terjadi bentrok dsb... :)

Artikel Terkait: