News Update :

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.




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

comment 21 Komentar on "Cara Membuat Horizontal Acrobatic Menu"

  • waah info yang sangat membantu nih,,pengetahuan baru juga,,makasih banyak,infonya,,sukses slalu,,,

  • mencoba sesuatu yang baru ga ada salahnya asal kita tetep berusaha dan bekerja keras untuk mencapai hasil yang maksimal,,,makasih dah berbagi infonya,,

  • nice info,,thanks for information,,,,
    sempet juga mampir balik ya,,,

  • peh menu'ne acrobat jungkir walik iso now mas, hehehehe .. sip", ndank sukses gwe WPne ki luw aku gwe blog neh mas nde http://mbah7.blogspot.com/ wingi tas gawe

    sukses poko'e mas fer,

  • ki mas blogku sing nyar, wis do follow ki tak melu komen ae ben entok BL, hehehehe

  • @Mbah7 & Hori Revens Beres.. langsung tak razia ktp

  • NAMA MENU MA URLNYA DI PASANG DI MANA MAS??

  • nice info,,thanks for information,,sempet mampir balik ya,,,

  • script diatas kalo dipasang di blog wp kira2 bisa nggak ya ?
    terima kasih infonya

  • informasinya luar biasa sangat bermanfaat sekali...
    Banyak sekali ilmu pengetahuan yang saya dapatkan
    Terimakasih banyak atas informasinya ...
    Semoga semakin sukses

  • informasinya sangat bagus sekali...
    saya suka..
    banyak pengetahuan yang saya dapatkan setelah saya berkunjung ke blog ini....

  • terimakasih banyak atas info nya sangat bermanfaat sekali
    semoga semakin sukses nya

  • sangat menarik sekali infonya :)

  • kebaikan yang anda berikan melalui blod ini semoga menjadi amal soleh,,,amin salam kenal dan sukses selalu

  • informasi yang sangat menambah wawasan saya makasih ga,.


  • makasih infonya sangat bermanfaat

  • Leave Your Comment

     
    site kreator
    © Copyright Indriawan dot Com | Informasi Dan Berita Online 2013 | Design by Fery Eka Indriawan | Powered by Blogger