Bentuk menu pada tutorial kali ini persis seperti gambar di atas itulah maksud dari menu slide. menu yang terlihat saat kursor menyentuhnya.
1. Simpan kode di bawah ini di atas kode
</head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>2. Simpan di bawah kode
<body><ul id="navigation"> <li class="home"><a href="http://sin1aja.blogspot.com"><span>Home</span></a></li> <li class="about"><a href="#"><span>About</span></a></li> <li class="search"><a href="#"><span>Search</span></a></li> <li class="photos"><a href="#"><span>Photos</span></a></li> <li class="rssfeed"><a href="#"><span>Rss Feed</span></a></li> <li class="podcasts"><a href="#"><span>Podcasts</span></a></li> <li class="contact"><a href="#"><span>Contact</span></a></li> </ul>
3. Simpan kode css di bawah ini di atas kode
]]></b:skin>ul#navigation {
position: fixed;
margin: 0;
padding: 0;
top: 0;
left: 25%;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#E7F2F9;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .home a{
background-image: url(http://cilimoes-file.googlecode.com/files/cilimoes-home.png);
}
ul#navigation .about a {
background-image: url(http://cilimoes-file.googlecode.com/files/cilimoes-about.png);
}
ul#navigation .search a {
background-image: url(http://cilimoes-file.googlecode.com/files/cilimoes-home.png);
}
ul#navigation .podcasts a {
background-image: url(http://cilimoes-file.googlecode.com/files/cilimoes-home.png);
}
ul#navigation .rssfeed a {
background-image: url(http://cilimoes-file.googlecode.com/files/feed.gif);
}
ul#navigation .photos a {
background-image: url(http://cilimoes-file.googlecode.com/files/Photo.gif);
}
ul#navigation .contact a {
background-image: url(http://cilimoes-file.googlecode.com/files/kontak-me.gif);
}Silahkan ganti - ganti sendiri ikon nya link nya dan juga warna - warnanya.
