-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet

Jquery Navigation Color Fading Hover




    Cara membuatnya ikuti langkah-langkah berikut :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya :


/*----------------
Jquery Color Fading Hover
-------------------------------*/
#pageBody {
    width:500px;
}

.hoverBtn {
    position:relative;
    float:left;
    background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ-dSLdMZiyUeACShAfyR-Yf7kE5U3Yya-Zdakug-YWFi0gGaqAYGOQ0EYisLq1foroIPsq83TibSCG6Pk3tH4Q0c8OzsMg27nhojgN5igziac8t72oigfRoHCGe2WL5HhpZuoqtkTng4/s1600/navBG.png) repeat-x 0 0 scroll;
}
.hoverBtn a {
    position: relative;
    z-index:2;
    display: block;
    width:100px;
    height:30px;
    line-height:30px;
    text-align: center;
    font-size:1.1em;
    text-decoration:none;
    color:#000;
    background:transparent none repeat-x 0 0 scroll;
}
.hoverBtn div {
    display:none;
    position:absolute;
    z-index:1;
    top:0px;
    background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVevbNsoCPn4RzwB4gurgY0ID5-yJvmhoWPN83lqlz9c9fxErz1couYMSueEdJFCLJPSC3KPFfm8a1w27s_qKJ_SO8uyR4KpSttBbZmvSnquWX1EeY5cSUrHzsV0A657d5uYTC2Bw3E0/s1600/navHover.png) repeat-x 0 0 scroll;
}

4. Simpan script berikut diatas kode </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://kangdadang.googlecode.com/files/jquery.color.js' type='text/javascript'/>
<script src='http://kangdadang.googlecode.com/files/main.js' type='text/javascript'/>

5. Untuk pemanggilannya, kalau saya disimpan dibawah tag Head-nav (seuaikan dengan template sobat tata letak nya):
<div id='pageBody'>
<a class='hoverBtn' href='#'>Home</a>
<a class='hoverBtn' href='#'>Mobile</a>
<a class='hoverBtn' href='#'>Tutorial</a>
<a class='hoverBtn' href='#'>About</a>
<a class='hoverBtn' href='#'>Contact</a>
</div>

Simpan template dan selesai......

Leave a Reply