Cara Membuat Menu Up And 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 src="http://kiki-efendi.googlecode.com/files/jquery-1.3.1.min.js" type="text/javascript">

</script>

<script src="http://kiki-efendi.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript">

</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/AVvXsEg7YQZO1ftHllSgzkaI_4nzV39il8SFl3Vlao4V7SYz77BZTlYojfTT3hFHKUeo1O6xLwUvv9gwufxRP1GBCEtl2nVo4rM-eK1prYkwhu4cfn9OpKhgyRmiqH7_H-gJR88PnaRhfMlLd7OZ/) 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 id="menu">

<li><a href="http://imamronggo.blogspot.com/2011/08/cara-membuat-animasi-kelelawar-dan-kupu.htmll">Item 1</a></li>

<li><a href="http://imamronggo.blogspot.com/2011/08/pingin-link-berkedip-ketika-cursor.htmll">Item 2</a></li>

<li class="selected"><a href="http://imamronggo.blogspot.com/search/label/Cara%20%20Menghilangkan%20Tanggal%20Postingan">Item 3</a></li>

<li><a href="http://imamronggo.blogspot.com/search/label/Translate%20Versi%20Google">Item 4</a></li>

<li><a href="http://imamronggo.blogspot.com/search/label/Cara%20%20Menghilangkan%20Tanggal%20Postingan">Item 5</a></li>

</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


Jangan lupak komentar ya