Cara Membuat Menu UpDown /Naik Turun Unik di Blog

Cara Membuat Menu Up Down.

Menu ini naik turun ini sangat unik sekali karena setiap kita mengarahkan cursor mouse maka menu ini akan bergerak naik turun sesuai dengan gambar yang akan anda pilih,
Menu ini sangat unik dan cocok untuk semua tampilan di blog anda...
Anda juga dapat menentukan menu link ini...
Ayo... Jangan Sampai ketinggalan untuk mencoba menu ini....

Klik Disini.... Untuk Melihat Contoh nya

Copy Paste script kodenya di bawah ini :

</script>

</script>

$(document).ready(function () {

var top_val = $('#menu li a').css('top');

$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});

$('#menu li').hover(

function () {

$(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});

function () {

$(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500});

//By www.kikiyo.co.cc

$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});

}

);

});

</script>

<style>

#menu {

list-style:none;

padding:0;

margin:0 auto;;

height:70px;

width:600px;

}

#menu li {

float:left;

width:109px;

height:inherit;

position:relative;

overflow:hidden;

}

#menu li a {

position:absolute;

top:20px;

text-indent:-999em;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2uRLqElHywAvhSMBZhDiv2HeN0xYdj6OK2foHEtDEwGWLFHQnXoqFT8F3uDNrDxDoCRTVW_LZz6vK6DVcERxgHZaE9obCp8gOeX_Dr3_sSFh1H4u7psucHb8ZEfwPQNYLUmRY-__WB0_7/) no-repeat 0 0;

display:block;

width:109px;

height:inherit;

/* fast png fix for ie6 */

position:relative;

behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",

this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",

this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));

}

</style>

</ul>

Ket :
- Tulisan Berwarna Kuning Dapat Anda Ganti Dengan Alamat Link URL anda
- Tulisan Berwarna Merah Dapat Anda Ganti dengan Alamat URL Ganbar yang anda Sukai
Selamat Mencoba Semoga Berhasil