-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet

Acrobatic Horizontal Menu With CSS + Jquery

Membuat sebuah menu horizontal yang di sisipi effect jQuery, saat Kursor mouse menyorot menu ini, maka salah satu menu ini akan terselip atau berjungkir balik secara otomatis :
Untuk demo nya bisa dilihat disini
Cara membuat nya yaitu sebagai berikut :

  1. Login Blogger2
  2. Pilih Rancangan ---> EDIT HTML 
  3. Simpan Kode CSS berikut diatas kode ]]></b:skin>
ul#topnav {
margin: 10px 0 20px;
padding: 20px;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
}
ul#topnav.v2 a{
color: #555;
border: solid #999 1px;
background-color:#eeeeee;
}
Kemudian Cari kode:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Simpan kode berikut di bawah kode di atas(Sesuai tema blog kawan):

<ul class='v2' id='topnav'>

<li><a href='#' title='HOME'>HOME</a></li>

<li><a href='#' title='MENU 1'>MENU 1</a></li>

<li><a href='#' title='MENU 2'>MENU 2</a></li>

<li><a href='#' title='MENU 3'>MENU 3</a></li>

<li><a href='#' title='MENU 4'>MENU 4</a></li>

<li><a href='#' title='MENU 5'>MENU 5</a></li>

<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>
Yang berwarna biru # (alamat link) MENU 3 (nama menu) Silahkan ganti sesuai keinginan......


Selanjutnya cari kode </head> dan simpan script berikut diatasnya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>


$(document).ready(function() {


$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...
var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
});

$(&quot;#topnav li&quot;).hover(function() { //On hover...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;0&quot; //Move the span back to its original state (0px)
}, 250);
});


});
</script>

Selamat mencoba......

Show 0 Comments
Categories: ,

Leave a Reply