<ul id=”topnav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>O Nas</a></li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>Cennik</a></li>
<li><a href=”#”>Projekty</a></li>
<li><a href=”#”>Kontakt</a></li>
</ul>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: #fff;
background: url(a_bg.gif) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
}
ul#topnav a{
color: #555;
background-position: left bottom;
}
ul#topnav span{
background-position: left top;
}<script type=”text/javascript”>
$(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″ //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out…
$(this).find(„span”).stop().animate({
marginTop: „0″
}, 250);
});
});
</script><script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>
1 gości
