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.
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() {
$("#topnav li").prepend("<span/>"); //Throws an empty span tag right before the a tag
$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});
$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //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..
No comments:
Post a Comment