Simple Animation Menu

Menu navigasi ini sangat unik, lucu dan sangat layak untuk di gunakan di blog anda. selain unik dan lucu menu navigasi ini juga simple dalam pemasangannya, script yang digunakan pun gak sebanyak menu navigasi yang lain. ikuti langkah langkah di bawah ini jika anda ingin mengaplikasikannya di blog anda.
Sebelum mencoba lebih baik lihat dulu demonya di Disini setelah itu Download filenya jika anda merasa cocok dengan menu navigasi ini.

Gini nih caranya :

login ke blog anda

pilih edit html

copy kan kode ini tepat diatas </head>
    

     <link rel="stylesheet" href="http://masukan alamat hostingan file anda/animated-menu.css"/>
     <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script> 
     <script src="http://masukan alamat hostingan file anda/js/jquery.easing.1.3.js" type="text/javascript"></script> 
     <script src="http://masukan alamat hostingan file anda/animated-menu.js" type="text/javascript"></script> 

lalu copykan kode dibawah ini tepat di bawah animated-menu.js

<script type='text/javascript'>


$(document).ready(function(){


    //When mouse rolls over
    $("li").mouseover(function(){
        $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });


    //When mouse is removed
    $("li").mouseout(function(){
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });


});


</script>

copykan script CSS dibawah ini tepat diatas </b:skin>

body{
    font-family:"Lucida Grande", arial, sans-serif;
    background:#F3F3F3;
}


ul{
    margin:0;
    padding:0;
}


li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}


a{
    color:#FFF;
    text-decoration:none;
}


p{
    padding:0px 5px;
}


    .subtext{
        padding-top:15px;
    }


/*Menu Color Classes*/
.green{background:#6AA63B;
}
.yellow{background:#FBC700;
}
.red{background:#D52100;
}
.purple{background:#5122B4;
}
.blue{background:#0292C0;
}

cari kode <div id='outer-wrapper'><div id='wrap2'>

kemudian copykan script html ini tepat di bawah kode <div id='outer-wrapper'><div id='wrap2'>

<div id='animated-menu'>
<ul>
        <li class="green">
            <p><a href="masukkan link anda">Home</a></p>
            <p class="subtext">The front page</p>
        </li>
        <li class="yellow">
            <p><a href="masukkan link anda">About</a></p>
            <p class="subtext">More info</p>
        </li>
        <li class="red">
            <p><a href="masukkan link anda">Contact</a></p>
            <p class="subtext">Get in touch</p>
        </li>
        <li class="blue">
            <p><a href="masukkan link anda">Submit</a></p>
            <p class="subtext">Send us your stuff!</p>
        </li>
        <li class="purple">
            <p><a href="masukkan link anda">Terms</a></p>
            <p class="subtext">Legal things</p>
        </li>
    </ul>
</div>

 kemudian save template anda

* Catatan Untuk background css nya saya sediakan di alamat berikut ini :

http://www.sigmirror.com/files/48596_miugm/blue-item-bg.jpg
http://www.sigmirror.com/files/48597_aqywz/green-item-bg.jpg
http://www.sigmirror.com/files/48598_ctpbn/purple-item-bg.jpg
http://www.sigmirror.com/files/48599_s02i2/red-item-bg.jpg
http://www.sigmirror.com/files/48600_ityye/yellow-item-bg.jpg

silahkan anda sesuaikan dengan kebutuhan anda serta anda dapat merubah background nya sesuai dengan
selera anda atau keinginan anda. Selamat mencoba