Cara Membuat Menu Up Down

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, dan Anda juga dapat menentukan menu link pada menu ini.

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/AVvXsEigbltxSu87_3NRl0_EhdrTqd0FJn1HVDqO9YnPNhU0Z2CHabDZKyjibhfgiPO9nkTeJ6PevXe1MP7vHPJq1RvswRFit-pS3Eh1EnIRhZ_uNxSZR2A5a1oB17MT2TTPIIhfCcYbcaMZjHDr/) 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://amirhamzahporang.blogspot.com/2011/03/cara-membuat-menu-up-down.html">Item 1</a></li>
<li><a href="http://amirhamzahporang.blogspot.com/2011/03/cara-membuat-menu-up-down.html">Item 2</a></li>
<li class="selected"><a href="http://amirhamzahporang.blogspot.com/2011/03/cara-membuat-menu-up-down.html">Item 3</a></li>
<li><a href="http://amirhamzahporang.blogspot.com/2011/03/cara-membuat-menu-up-down.html">Item 4</a></li>
<li><a href="http://amirhamzahporang.blogspot.com/2011/03/cara-membuat-menu-up-down.html">Item 5</a></li>
</ul>

Keterangan :

• Tulisan Berwarna Kuning Dapat Anda Ganti Dengan Alamat Link URL anda
• Tulisan Berwarna Merah Dapat Anda Ganti dengan Alamat URL Gambar yang anda Suka

Selamat Mencoba Semoga Bermanfaat

Bagikan ke

Facebook Google+ Twitter