Menu Horizontal Acrobatic dengan CSS + Jquery

Salam Sejahtera !!! Kali ini saya mau share kepada anda bagaimana cara memasang menu horizontal acrobatic dengan memakai CSS dan Jquery. O yah saya teringat pernah posting sebelumya tentang cara memasang Light Hover Horizontal Menu dengan CSS untuk Blogger. Tapi yang ini memiliki effect jQuery ketika kursor mouse anda menyorot menunya, artinya salah satu menu akan terselip sambil berputar balik.

Untuk lebih jelasnya, silahkan anda klik demo preview dibawah ini:

Baiklah bagi anda yang mau memasangnya, silakan anda ikuti langkah-langkahnya sbb :
1. Login ke Dasbor Blogger anda
2. Pilih menu Rancangan atau Design->> EDIT HTML
3. Cari kode CSS ]]></b:skin> untuk cari cepat tekan Ctrl+F dan ketik codenya
4. Copy-paste code CSS dibawah ini dan letakkan diatas code ]]></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(https://sites.google.com/site/tutorialbloghost/mypictures/menu-horizntal-acrobatic.png) repeat-x left top;}
ul#topnav.v2 a{color: #555;background: url(https://sites.google.com/site/tutorialbloghost/mypictures/menu-horizntal-acrobatic.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>

5. Simpan kode dibawah ini 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. Silahkan anda 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. Klik tombol Simpan Template anda

Catatan :

• Untuk menu ini, tidak diharuskan/diwajibkan meletakkannya dibawah kode diatas saja, bisa juga diletakkan ditempat yang sesuai dengan template anda.
• Kata MENU1 s/d MENU6, ganti dengan menu yang anda inginkan
• Tanda "#" alamat link menu anda

Selamat berkreasi [Happy Blogging]