Animation Menu Navigation CSS3

LIHAT DEMO

Cara Pertama:

1. Login ke blog kamu.

2. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.

<style>
/* Div Wrapper */
#menuBar{
    /* Hide text that goes beyond
       the bottom of the wrapper */
    overflow:hidden;

    /* Give wrapper background image */
    width:503px;
    height:102px;
    background: transparent url(https://lh5.googleusercontent.com/-35weoKqLCtI/UGLffqVYtiI/AAAAAAAAFnU/UBy-L4-5kuM/s503/bar.jpg) no-repeat scroll left top;

    /* Center menu on page and give it a border */
    margin:0 auto;
    border:10px solid #111;
}
#menuBar ul{
    /* Center menu inside wrapper */
    width:380px;
    margin:0 auto;

    /* Get rid of bullets */
    list-style-type: none;
}
#menuBar ul li{
    /* Make menu horizontal */
    float:left;

    /* Add spacing between menu items */
    padding-right:40px;

}
#menuBar a{

    /* Give each menu item a background image */
    width:55px;
    height:102px;
    display:block;
    background: transparent url(https://lh5.googleusercontent.com/-YQA8S8-VJGo/UGLfktfY-UI/AAAAAAAAFnc/kslfGZTu63s/s503/logos.jpg) no-repeat scroll left top;
    /* Push text down below bottom of wrapper*/
    padding-top:100px;

    /* Beautify Text*/
    color:#ddd;
    font-family: Arial, "MS Trebuchet", sans-serif;
    text-decoration: none;
    font-size:10pt;
    font-weight:bold;
    outline:none;
}

#menuBar a:hover{
    /* change background image for rollover state */
    background-image:url(https://lh6.googleusercontent.com/-J3e-zxNABXQ/UGLfpr_RZkI/AAAAAAAAFnk/4DORq-4EOHw/s503/logos-over.jpg);
}

/* Position each background image accordingly
   to display icons */
#menuBar a#Home{
    background-position:-67px top;
}
#menuBar a#About{
    background-position:-166px top;
}
#menuBar a#Gallery{
    background-position:-266px top;
}
#menuBar a#Contact{
    background-position:-373px top;
}
</style>
<div id="menuBar">
        <ul>
            <li><a href="ADD URL BLOG KAMU" id="Home">Home</a></li>
            <li><a href="ADD URL" id="About">About</a></li>
            <li><a href="ADD URL" id="Gallery">Gallery</a></li>
            <li><a href="ADD URL" id="Contact">Contact</a></li>
        </ul>
    </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $("a").mouseover(function(){
        var selected = "#"+$(this).attr("id");
        $(selected).animate({paddingTop:"78px"}, 100);
    }).mouseout(function(){
        var selected = "#"+$(this).attr("id");
        $(selected).animate({paddingTop:"100px"}, 100);
    });
});
</script>

3. Simpan.
Selamat Mencoba.

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Dika, Published at Jumat, Desember 28, 2012 and have 0 komentar