Cara Membuat Horizontal Acrobatic Menu - Indriawan dot Com | Informasi Dan Berita Online

Breaking

Post Top Ad

Space Iklan

Senin, 11 April 2011

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

21 komentar:

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

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

    BalasHapus
  3. nice info,,thanks for information,,,,
    sempet juga mampir balik ya,,,

    BalasHapus
  4. 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,

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

    BalasHapus
  6. NAMA MENU MA URLNYA DI PASANG DI MANA MAS??

    BalasHapus
  7. nice info,,thanks for information,,sempet mampir balik ya,,,

    BalasHapus
  8. script diatas kalo dipasang di blog wp kira2 bisa nggak ya ?
    terima kasih infonya

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

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

    BalasHapus
  11. terimakasih banyak atas info nya sangat bermanfaat sekali
    semoga semakin sukses nya

    BalasHapus
  12. sangat menarik sekali infonya :)

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

    BalasHapus
  14. informasi yang sangat menambah wawasan saya makasih ga,.

    BalasHapus

  15. makasih infonya sangat bermanfaat

    BalasHapus
  16. Terima Kasih ya Gan, Artikel yang sangat Bagus dan Bermanfaat.. Update terus dan sukses selalu ya Gan..
    jangan lupa berkunjung yah gan^^
    judi online
    situs judi online
    roulette
    roulette online
    baccarat
    baccarat online
    casino online
    live casino
    agen casino
    judi casino

    BalasHapus

Post Top Ad

Space Iklan