Horizontal Menu With jQuery

Menu di dalam sebuah web atau blog mempunyai fungsi yang sangat penting yaitu untuk memudahkan para pengunjung berselancar di web atau blog tersebut selain untuk memudahkan pengunjung berselancar bisa juga untuk mempercantik tampilan web tersebut.

Pada kesempatan kali ini saya akan menjelaskan tentang cara membuat menu horizontal yang di beri sedikit sentuhan jQuery jadi ketika menu ini sorot oleh kursor mouse maka menu tersebut akan berjungkir balik. Menu ini juga ditambahi dengan efek bayangan/shadow.
Jika masih bingung silakan lihat demonya.

Demo

Cara Membuatnya
1. Login ke Blogger -> Rancangan -> Edit HTML
2. Cari kode berikut

 ]]></b:skin>

3. Copy dan paste kode di bawah ini tepat sebelum kode no 2

ul#topnav {
   margin: 20px 0 90px;
   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-align: center;
   text-decoration: none;
   color: #fff;
   text-shadow:0px 1px 0px #000;
   text-transform: uppercase;
   clear: both;
   height: 20px;
   width:100px;
   line-height: 20px;
   background: #555;
}
ul#topnav a {
   color: #7bc441; }
ul#topnav span {
   display: none;
}
ul#topnav.v2 span{
   background:#121212;
}
ul#topnav.v2 a{
   color: #ccc;
   background:#151515;
   -moz-box-shadow: 1px 1px 65px #ccc;
}

4. Cari kode berikut

</head>

5. Copy dan paste kode di bawah ini tepat di atas kode no 4

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$("#topnav li").prepend("<span></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>

6. Copy kode dibawah ini dan paste di gadget HTML/JavaScript atau kamu simpan di tempat yang kamu suka

<ul class='v2' id='topnav'>
<li><a href='http://purnamalabs.blogspot.com/' title='HOME'>HOME</a></li>
<li><a href='ALAMAT LINK' title='MENU 1'>MENU 1</a></li>
<li><a href='ALAMAT LINK' title='MENU 2'>MENU 2</a></li>
<li><a href='ALAMAT LINK' title='MENU 3'>MENU 3</a></li>
<li><a href='ALAMAT LINK' title='MENU 4'>MENU 4</a></li>
<li><a href='ALAMAT LINK' title='MENU 5'>MENU 5</a></li>
</ul>

Semoga Bermanfaat