Membuat menu horisontal acrobatic tanpa image

Menu horisontal mutlak diperlukan dalam sebuah halaman blog.  Mengingat fungsinya yang amat penting yakni sebagai navigator bagi pengunjung agar mudah menuju link yang lain.  Tentu saja link tersebut berisi informasi yang sesuai selera pengunjung.

Karena letaknya yang sangat strategis, maka menu horizontal mau tidak mau harus dipermak agar pengunjung terpikat lantaran telah melihat blog dengan penampilan yang enak dilihat.

Memang banyak ragam dan model menu horizontal yang beredar di internet, tetapi kali ini saya coba menawarkan kepada anda barangkali cocok dengan selera anda maka tak ada salahnya saya postingkan menu horizontal acrobatic tanpa gambar/image.

Tutorial cara membuat menu horisontal acrobatic tanpa image ini awalnya saya dapat dari blog luar negeri saya lupa namanya, dalam tutorial tersebut masih menggunakan gambar/image sebagai backgroundnya lalu saya modifikasi sedikit yakni image saya ganti dengan kode warna.  Hasilnya pun tak kalah menariknya dengan menu horisontal acrobatic yang menggunakan image sebagai backgroundnya.

Sebagai gambaran seperti apa sih menu acrobatic itu?
Menu horisontal acrobatic tanpa image dibuat murni dengan menggunakan kode css dan tanpa image. Kalau memakai image juga bisa, akan tetapi nanti anda akan direpotkan dengan mengupload gambar tersebut.

Efek yang dihasilkan pada menu horisontal acrobatic tanpa image yaitu ketika posisi hover (disorot mouse) akan menimbulkan efek menyerupai efek slide vertical dan karena ada sentuhan jquery sehingga sangat halus efeknya.

Silahkan klik demo, untuk melihat menu horisontal acrobatic tanpa image.

Lihat Demo

Cara pembuatan :
1.    Pasang kode script jquery ini sebelum</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

2.    Kalau di dalam template anda sudah pernah dipasang script jquery maka langkah nomor 1 jangan dilakukan.
3.    masukkan kode ini dibawah kode nomor 1 :

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

4.    Cari kode ]]></b:skin> Masukkan kode di bawah ini di atasnya

ul#topnav {background:#000;
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;font-weight:bold;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color:#FFF;font-weight:bold;
background-color: #09F;}
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: #e55c00;
}
ul#topnav.v2 a{
color: #555;
background: #ffffff;
}

5.    klik save
6.    tambah gadget baru (add a gadget)
7.    pilih HTML/JavaScript
8.    copy paste kode ini ke dalam gadget HTML (tidak perlu diberi judul)

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

9.    Save lalu lihat hasilnya

Keterangan:

1. Kalau warnanya tidak cocok silahkan ganti kode yang berwarna merah dengan kode warna yang lain.
2. Ganti tanda # dengan Link anda

Mudah-mudahan tutorial membuat menu horisontal acrobatic tanpa image ini dapat menambah koleksi blog anda.