0 Jquery Navigation Color Fading Hover

Jquery Navigation Color Fading HoverAsalamualaikum semuanya, sudah lama sekali tidak posting dan nambah-nambah Tutorial blog  jquery, saya sempat-sempatkan karena lagi kurang sehat, yang kali ini saya postingkan masih sama tentang jquery..., sebuah menu navigasi dengan menu Fading Hover ditambah efek-efek dari script jquery,
dan Lansung saja karena gak bisa lama2 lihat layar ,
Cara membuatnya ikuti langkah-langkah berikut :
Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
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/AVvXsEgdepVbzLwG2cYCRGOXcMWXpdBZuqXgJoRG7GFWJLIZswkqvr88WV5Fygk98NDL7GcV7ipjTtnOJebJoMRoOVK-ITMd7CMLwaRkL0eZDFHC9BWNPNHMxdtGfaBMyO-_E9AvIIYcDmgzQt4/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/AVvXsEjUCs1xLlDczKdCEdRofClo6coJkKa_ttPY6Y75Rg7ipqdYrWLQ43f5Ej_dyoIgiv861TFshbiPkcXLZNLh8H7_4kz5h6dj06jGW0wfZ4N-nveKsX4K8i3yM7d37gtVaIffV3b2S22X4Ec/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......

Mas Uwah

Anda suka atau merasa artikel ini bermanfaat? Jika ya, mohon kesediaannya untuk meng-klik tombol Plus One yang ada di samping ya. Terima kasih

related post :