Menu Navigasi Horizontal dengan Jquery

Menu Navigasi Horizontal dengan Jquery hadir dengan memberikan desain yang sangat elegan dengan multilevel secara horizontal juga. Menu navigasi ini telah banyak digunakan oleh situs-situs atau blog. Pada tips kali ini saya akan langsung memberikan tipsnya kepada sobat blogger supaya blog sobat semakin keren. Oke, langsung saja ke pokok bahasan kita kali ini. Tetapi sebelum kepada cara-cara membuat menu ini, saya ingin memberikan demonya dulu kepada sobat blogger. Kira-kira seperti apa nantinya tampilan menu navigasi ini. Silahkan lihat demonya dengan mengklik link di bawah ini:

DEMO

Nah..setelah melihat demonya sudah tergambar kan kira-kira tampilan menu ini seperti apa?. Kira-kira cock gak yah ditampilkan pada vlog sobat?. Jika menu navigasi ini cocok ditampilkan pada blog sobat silahkan lanjut baca triknya. Jika tidak, mungkin anda bisa coba yang ini, jika belum cocok silahkan coba yang ini. Kalau tidak cocok lagi, silahkan tunggu tips kami berikutnya. Heheheh.. :)

Langkah pertama untuk menampilkan menu navigasi ini adalah, anda harus berada pada posisi log-in pada blog sobat. Setelah itu silahkan letakkan kode berikut sebelum kode </head>.

<style type='text/css'>

ul#topnav {
margin: 0; padding: 0;
float: left;
width: 100%;
list-style: none;
position: relative;
font-size: 1.2em;
background: #383838;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #fff;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url() repeat-x; }
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 100%;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>
<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;ul#topnav li&quot;).hover(function() { //Hover over event on list item
$(this).css({ &#39;background&#39; : &#39;#1376c9 url() repeat-x&#39;}); //Add background color + image on hovered list item
$(this).find(&quot;span&quot;).show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ &#39;background&#39; : &#39;none&#39;}); //Ditch the background
$(this).find(&quot;span&quot;).hide(); //Hide the subnav
});

});
</script>

Kemudian silahkan Simpan Template, dan beralih pada Tata Letak =>> Add Gadget =>> HTML/JavaScript dan kemudian letakkan kode script berikut ini:

<ul id="topnav">

<li><a href="#">Home</a></li>
<li>
<a href="#">Blogger</a>
<span>
<a href="#">Widgets</a> |
<a href="#">Tip And Tricks</a> |
<a href="#">Basic</a>
</span>
</li>
<li>
<a href="#">Tutorials</a>
<span>
<a href="#">HTML</a> |
<a href="#">Java Script</a> |
<a href="#">CSS</a>
<a href="#">jQuery</a>
<a href="#">MooTools</a>
</span>
</li>
<li>
<a href="#">Templates</a>
<span>
<a href="#">1 Column</a> |
<a href="#">2 Column</a> |
<a href="#">3 Column</a> |
<a href="#">4 Column</a> |
<a href="#">Premium</a>
</span>
</li>
<li><a href="#">Subscribe</a></li>

<li><a href="http://tips-untuk-blogger.blogspot.com/">TuB</a></li>
</ul>

Note: Saya pikir sobat blogger sudah mengerti untuk mengedit atribut menu navigasinya. Jika belum silahkan tinggalkan komentar atau surati saya lewat e-mail.

Jika sudah anda letakkan (pastekan) pada kotak HTML/JavaScript sekarang silahkan edit atribut menunya dan Simpan dan lihat perubahan yang terjadi pada blog anda.

Semoga bermanfaat, dan mohon maaf jika ada kesalahan (Jkt/2012)