Contoh Horizontal Menu
body {
font-family:arial, serif;
}
#container {
border:1px solid #ffbc58;
padding:10px;
background:#ffe9c8;
}
ul {
list-style:none;
margin:0;
padding:0;
}
#topmenu {
height:30px;
}
#topmenu li {
float:left;
position:relative;
}
#menu_1{
width:70px;
height:30px;
float:left;
font-size:1.2em;
position:relative;
}
#menu_1 span{
background:url(menu_1.jpg) no-repeat;
position:absolute;
width:100%;
height:100%;
cursor:pointer;
}
#menu_2{
width:91px;
height:30px;
float:left;
font-size:1.2em;
position:relative;
}
#menu_2 span{
background:url(menu_2.jpg) no-repeat;
position:absolute;
width:100%;
height:100%;
cursor:pointer;
}
#menu_3{
width:103px;
height:30px;
float:left;
font-size:1.2em;
position:relative;
}
#menu_3 span{
background:url(menu_3.jpg) no-repeat;
position:absolute;
width:100%;
height:100%;
cursor:pointer;
}
#topmenu a:hover span {
background-position:0 -30px;
}
a,a:link,a:visited,a:hover {
color:#ff9800;
text-decoration:none;
}
a:focus,a:hover {
text-decoration:underline;
}
Contoh Horizontal Menu
$(document).ready(function(){
$("#topmenu a").hover(function() {
$(this).next("div").animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("div").animate({opacity: "hide", top: "-80"}, "fast");
});
});
#topmenu li div {
font-size:11px;
background:url(bubble.gif) no-repeat;
width: 80px;
height: 33px;
position: absolute;
text-align: center;
z-index: 2;
display: none;
text-align:center;
padding:10px 5px;
top:-40px;
left:0;
}
