Menu yang ketika Mouse Hover akan berganti seperti slide, dibuat dengan CSS dan Jquery.

Kali ini kita akan mencaba membuat contoh menu yang bisa diterapkan di website anda, menu ini cukup menarik karena terlihat agak animatif dengan slide nya.

Oke kita mulai saja langsung

Ingredients

1. Font Electrolize dari Google Web Fonts
2. Jquery
   
3. Subtlepattern Egg-Shell

Struktur HTML Menu

<div class=”mn-container”>

<ul id=”topnav”>
<li><a href=””>Home</a></li>
<li><a href=””>Services</a></li>
<li><a href=””>Portfolio</a></li>
<li><a href=””>Blog</a></li>
<li><a href=””>About</a></li>
<li><a href=””>Contact</a></li>
</ul>
</div>

Disitu kita membuat container untuk menu, dan sebuah unordered list untuk list menu nya.

Code untuk bagan menu

.mn-container{
margin:50px auto;
width:680px;
padding:20px;
background:rgba(255,255,0,.1);
overflow:hidden;
border:1px solid rgba(225,225,225,.9)
}

Berikut ini code untuk List Menu nya

ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
font-family: ‘Electrolize’, sans-serif;
}
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: #333;
background:rgba(255,255,255,.5);
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
}
ul#topnav a{
color: #ff0000;
background-position: left bottom;
}
ul#topnav span{
background-position: left top;
}

Code Jquery untuk membuat menu terlihat berganti seperti sebuah slide

$(document).ready(function() {

$(“#topnav li”).prepend(“<span></span>”);

$(“#topnav li”).each(function() {
var linkText = $(this).find(“a”).html();
$(this).find(“span”).show().html(linkText);
});

$(“#topnav li”).hover(function() { //On hover…
$(this).find(“span”).stop().animate({
marginTop: “-40”
}, 500);
} , function() { //On hover out…
$(this).find(“span”).stop().animate({
marginTop: “0”
}, 500);
});

});

Oke sekian tulisan saya kali ini, semoga bermanfaat ya.

Salam Web Design Indonesia 🙂

SUMBER = http://www.tutorial-webdesign.com/membuat-slide-menu-dengan-css-dan-jquery/