Cara Membuat Horizontal Acrobatic Menu

Beberapa hari ini saya memang jarang update blog ini dikarenakan saya lagi mendalami untuk belajar WP. Tapi sebisa mungkin saya akan update blog sederhana ini meskipun hanya tutorial sederhana. Pada kesempatan kali ini kita akan membahas Cara Membuat Horizontal Acrobatic Menu. Tutorial ini saya dapatkan beberapa hari lalu dari sahabat saya Azis Lamayuda. Langsung saja lihat demonya.

LIVE DEMO

Untuk cara membuatnya, ikuti langkah-langkah di bawah ini.

1. Pasang kode css berikut di atas ]]></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;
}

2. Pemasangan jquery di atas </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>

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

4. Pasang kode HTML untuk menu berikut di bawah kode di atas

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

5. Save template

Note: Untuk pemasangan menu, sobat tidak di haruskan meletakkan di bawah kode di atas tadi. Sobat bisa meletakkannya di add gadget, tinggal sesuaikan dengan template saja.

Semoga bermanfaat.
Alhamdulillah..