Home » » jQuery Background Right Left Effect

jQuery Background Right Left Effect




    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya : 
/* ---------------
jQuery Background Right left effect
---------------------------------- */
#Rightleft {
    list-style:none;
    margin:0;
    padding:0;
    }
#Rightleft li {
    float:left;
    width:100px;
    margin:0;
    padding:0;
    text-align:center;
    }
#Rightleft li a {
    display:block;
    padding:5px 10px;
    height:100%;
    color:#FFF;
    text-decoration:none;
    border-right:1px solid #FFF;
    }
#Rightleft li a:hover, li a:focus, li a:active {
    background-position:-150px 0;
    }
#Rightleft a {
    background:url(https://lh5.googleusercontent.com/-UQCrD4zJAZ8/TYvtNpSDmVI/AAAAAAAAAeg/J_LnzehcoPE/s1600/bg2.jpg) repeat 0 0;
    }

  • 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" src="http://kangdadang.googlecode.com/files/jquery.bgpos.js"></script>
<script type="text/javascript">

$(function(){
    $('#Rightleft a')
        .css( {backgroundPosition: "0 0"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
        })
        .mouseout(function(){
            $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
                $(this).css({backgroundPosition: "0 0"})
            }})
        })
  
});
</script>

  • 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" src="http://kangdadang.googlecode.com/files/jquery.bgpos.js"></script>
<script type="text/javascript">

$(function(){
    $('#Rightleft a')
        .css( {backgroundPosition: "0 0"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
        })
        .mouseout(function(){
            $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
                $(this).css({backgroundPosition: "0 0"})
            }})
        })
  
});
</script>

  • Terakhir cara pemanggilannya pada Html atau pada template kalau saya biasa diletakkan di bawah tag <div id='head-nav'> (sesuaikan dengan template anda) :
<ul id="Rightleft">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Tutorial</a></li>
</ul>

  • Selesai
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 . .