Home » » Animated Drop Down Menu With JQuery

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>

  1. Terakhir cara pemanggilannya pada Html  :
<img src="https://lh4.googleusercontent.com/-ZaIhj_GNxBg/TXHqtYwl1WI/AAAAAAAAATY/Aq5m2EBr0gE/s1600/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>

NB:
Untuk script jquery yang diberi warna Biru ; jika sudah ada, tidak perlu ditambahkan lagi

  • Save
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .