Acrobatic Horizontal Menu With CSS + Jquery

Bismillah...ACROBATIC HORIZONTAL MENU, Setelah sebelumnya saya menjelaskan tentang Light Hover Horizontal Menu, sekarang saya akan memberikan tips baru lagi yaitu membuat menu horizontal yang di sisipi effect jQuery. Maksudnya, saat Kursor mouse menyorot menu ini, maka salah satu menu ini akan terselip atau berjungkir balik. Dan postingan ini juga saya buat sebenarnya atas permintaan salah satu sahabat blogger saya :

trik yang mantap,,
Kapan2 posting menu horizontal yang bisa slip ke atas sob ^_^

Untuk DEMO PREVIEW nya kalian bisa melihatnya dengan mengKLIK button DEMO dibawah ini:



Berikut tahap-tahap membuat ACROBATIC HORIZONTAL MENU :

1. Login Ke Blogger kalian
2. Pilih Rancangan ---> EDIT HTML
3. Simpan CSS berikut diatas kode ]]></b:skin>

ul#topnav {
margin: 10px 0 20px;
padding: 0;
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{
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left bottom;
}

4. Kemudian cari kode berikut

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

catatan :
Untuk penyimpanan menu ini, kalian tidak diharuskan/diwajibkan menyimpannya dibawah kode diatas saja, kalian bisa menyimpannya ditempat yang sesuai dengan template kalian.

5. Simpan kode berikut tepat setelah kode diatas (tidak wajib)

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

6. Sekarang kalian simpan Script berikut diatas kode </head>

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


7. Simpan Template kalian


^^ Tambahan :

Menu yang saya jelaskan diatas tampilannya adalah saat mouse menyorot yang berjungkir balik adalah tulisan + Background nya, jika kalian hanya ingin tulisannya saja yang berjungkir balik, silahkan Pakai kode dibawah ini :

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

Semoga bermanfaat dan silahkan dicoba. Terima kasih

PELENGKAP :

• Silahkan kalian ganti tulisan MENU diatas dengan tulisan yang akan kalian tampilkan di menu, dan jangan lupa juga mengisi Linknya
• Source : jQuery, Java Scirpt, Sohtanaka, Dynamic Drive

Silahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Penulis :  Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.