MEMBUAT TOMBOL MENU ANIMASI DENGAN JQUERY

Berikut ini gue bakal ngasi sedikit ilmu yang ane ketahui, yaitu membuat menu animasi dengan jquery
#1 Membuat menu dengan HTML

Buat menu yang akan di animasikan

<ul id="topnav">

                <li><a href=”#”>Home</a></li>

                <li><a href=”#”>Profile</a></li>

                <li><a href=”#”>Portofolio</a></li>

                <li><a href=”#”>Guestbook</a></li>

                <li><a href=”#”>Contact</a></li>

</ul>

 

#2. Membuat style dengan CSS

Kemudian masukan style di bawah ini sebagai style untuk menu di css anda.

#3. Animasi JQUERY

Kemudian masukan file jquery.js, download di sini

<script type="text/javascript" src="jquery.js"></script>

 

#4. Kemudian tulis script di bawah ini di tag head

<script type="text/javascript">

$(document).ready(function() {               

                $("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

               

                $("#topnav li").each(function() { //For each list item...

                                var linkText = $(this).find("a").html(); //Find the text inside of the a tag

                                $(this).find("span").show().html(linkText); //Add the text in the span tag

                });

               

                $("#topnav li").hover(function() {            //On hover...

                                $(this).find("span").stop().animate({

                                                marginTop: "-40" //Find the span tag and move it up 40 pixels

                                }, 250);

                } , function() { //On hover out...

                                $(this).find("span").stop().animate({

                                                marginTop: "0" //Move the span back to its original state (0px)

                                }, 250);

                });

               

});

</script>

<style type="text/css">

html {    background: #1d1d1d; }

body {

                margin: 0; padding: 0;

                font: 10px normal Verdana, Arial, Helvetica, sans-serif;

                background: #1d1d1d;

}

h1 {

                font: 4.7em normal Georgia, 'Times New Roman', Times, serif;

                color: #fff;

                margin: 0;

                text-align: center;

                padding: 5px 0;

}

h1 small{

                font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;

                text-transform:uppercase;

                letter-spacing: 1.4em;

                display: block;

                color: #ccc;

}

.container {

                width: 520px;

                height: 330px;

                position: absolute;

                top: 50%; left: 50%;

                margin: -165px 0 0 -210px;

                overflow: hidden;

}

img {border: none;}

ul#topnav {

                margin: 10px 0 20px;

                padding: 0;

                list-style: none;

                font-size: 1.1em;

                clear: both;

                float: left;

                width: 1000px;

}

ul#topnav li{

                margin: 0;

                padding: 0;

                overflow: hidden;

                float: left;

                height:40px;

}

 

ul#topnav a, ul#topnav span {

                padding: 10px 20px;

                float: left;

                text-decoration: none;

                color: #fff;

                text-transform: uppercase;

                clear: both;

                height: 20px;

                line-height: 20px;

                background: #1d1d1d;

}

ul#topnav a {     color: #7bc441; }

ul#topnav span {

                display: none;

}

ul#topnav.v2 span{

                background: url(a_bg.gif) repeat-x left top;

}

ul#topnav.v2 a{

                color: #555;

                background: url(a_bg.gif) repeat-x left bottom;

}

</style>

 Mudah kan ???

DEMO

DOWNLOAD SCRIPT