Header Menu sederhana tapi Bagus untuk menambah kecantikan blog
Sebelum
Sesudah
Masukan Kode Css Di bawah Ini Di atas ]]></b:skin>
ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
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: #ff0000;
background: transparent(http://www.sohtanaka.com/web-design/examples/fancy-navigation/a_bg.gif) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
}
ul#topnav a{
color: #555;
background:#ff0000;
border-left: 3px solid #ffffff;
}
ul#topnav span{
background-position: left top;
border-left: 3px solid #ff0000;
}
masukan kode Jquery diatas </body>
<script type='text/javascript'>
$(document).ready(function() {
$("#topnav li").prepend("<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"
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0"
}, 250);
});
});
</script>
Taruh Jquery Diatas Kode <head> kalo sudah ada Tidak Perlu Lg :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
0 komentar:
Posting Komentar
silahkan tinggalkan komentar