cara membuat menu up down di blog

cara membuat menu up down di blog

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


lihat contoh nya di atas di bawah menu horosontal

untuk membuat nya:copy paste code berikut:

edit element
tambah gadget html javascript.

<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/AVvXsEizRQFgrHRYQAmZzZ56arkz4v1VHAYbkaAyFEK6OviW3m5xYt1bGeus75fLSDnPpHCI5a1WA5pCKO7v-bsxgOh8anUnglZIXi1aQNWn52KL8Ph2z16F6EE_tAK2Vg_YpOhU5Z5jhTFYEVKe/) 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://www.kikiyo.co.cc/2010/07/generator-jam-dinding.html">Item 1</a></li>
<li><a href="http://www.kikiyo.co.cc/2010/07/generator-kertas-cinta.html">Item 2</a></li>
<li class="selected"><a href="&http://www.kikiyo.co.cc/2010/07/generator-teks-animasi.htmlquot;>Item 3</a></li>
<li><a href="http://www.kikiyo.co.cc/2010/07/generator-teks-lcd.html">Item 4</a></li>
<li><a href="http://www.kikiyo.co.cc/2010/08/generator-funny-animals.html">Item 5</a></li>
</ul>


- Tulisan Berwarna Kuning Dapat Anda Ganti Dengan Alamat Link URL anda
- Tulisan Berwarna merah Dapat Anda Ganti dengan Alamat URL Ganbar yang anda Suka