Hey guys. New to jQuery and with that, new to this forum. As im learning i hope to make this forum a valuable resource for myself, and as i learn, help others. Enough introduction.
I have a menu at the top of my page (ol#topnav) and as you mouseover the menu items, my background image slides in from the top and the text turns white. Everything works fine except the text, it does nothing. I have a feeling it may be a syntax problem. I have been searching for a couple hours now and can seem to find a solution. I have stumbled upon many different ways of doing it, just not in the capacity i need it.
Heres my code.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>choice|media</title>
<script type="text/javascript" src="js/jquery-1.5.2.js"></script>
<script type="text/javascript" src="js/jquery.backgroundpos.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ol#topnav a')
.css( {"backgroundPosition": "0px -20px"} )
.mouseover(function(){
$(this).animate(
{"background-position":"0px 0px", "color":"white"},
{duration:250})
})
.mouseout(function(){
$(this).stop().animate(
{"backgroundPosition":"0px -20px"},
{duration:250})
})
});
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="top_header">
<div id="site_title"><img src="images/title.png" alt="choice media"/></div>
<div id="top_nav_container">
<ol id="topnav">
<li><a href="#">portfolio</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ol>
</div>
</div>
</body>
</html>
css
Code:
ol#topnav{
width: 300px;
list-style: none;
margin: 0 auto;
}
ol#topnav a {
margin: 0 auto;
display: block;
width: 100px;
height: 20px;
background-image: url(images/menu_over_bg.jpg);
background-repeat: no-repeat;
text-decoration: none;
text-align:center;
color: black;
font-family: Corbel;
font-size: 11pt;
}
ol#topnav li {
display: block;
float: left;
width: 100px;
}
Sorry its messy. Any ideas or help, i would be greatfull for. Thanks!