Tim Van Damme Inspired by Tim Vand Damme

Pengikut

Network


ShoutMix chat widget

Buku Tamu

Blog

9 Jun 2011

Membuat Menu Jquery Navigation Color Fading Hover

Menu Jquery Navigation Color Fading Hover memang terkenal sangat cantik dan indah , jika anda ingin membuatnya silahkan lihat dulu screenshootn Jquery Navigation Color Fading Hover berikut :


masuk ke dashboard - Rancangan - Edit Html , kemudian letakkan kode berikut diatas kode ]]></b:skin>

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

.hoverBtn {
    position:relative;
    float:left;
    background:black url(http://1.bp.blogspot.com/-V6Z_DWIQJjI/TamZJl83ycI/AAAAAAAAAmU/GZ7eF3dma7g/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(http://2.bp.blogspot.com/-mRhK36AybaU/TamZLAs8S_I/AAAAAAAAAmY/HjvEEsjDtHI/s1600/navHover.png) repeat-x 0 0 scroll;
}

kemudian letakkan kode 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'/>
Untuk Memanggilnya silahkan letakkan menunya dibwah Head-Nav ( sesuaikan dengan template sobat)


<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.
Semoga Cara Membuat Menu Jquery Navigation Color Fading Hover bermanfaat. thanks

reff : Kangdadang

0 komentar:

Posting Komentar


Only CSS and Jquery Design by Insight © 2009

This template is brought to you by : allblogtools.com | Blogger Templates