I am working on a jquery navigation. All's well in everything except IE. Functionality for the jquery rollover state does not work. Any thoughts? I have the wrapper navigation coded and there is a changeover effect on rollover for each link. I am thinking that I might be missing some sort of element as a work around in IE, but I am not sure. I've tried to look at other bits of code available and can't seem to find any help on what I'm missing on this one. Thank you!
CSS:
#menu {
height: 45px;
width: 1000px;
margin: 0 auto;
position: relative
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
/* width and height of the menu items */
float: left;
overflow: hidden;
position: relative;
text-align: center;
line-height: 45px;
}
.menu ul li a {
/* must be postioned relative */
position: relative;
display: block;
width: 190px;
height: 45px;
font-family: Arial;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
cursor: pointer;
}
.menu ul li a span {
/* all layers will be absolute positioned */
position: absolute;
left: 0;
width: 190px;
}
.menu ul li a span.out {
top: 0px;
}
.menu ul li a span.over, .menu ul li a span.bg {
/* hide */
top: -45px;
}
#menu {
background: #000;
}
#menu ul li a {
color: #FFF;
}
#menu ul li a span.over {
background: #FFF;
color: #fb8f2c;
}
HTML:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<!--begin wrapper-->
<div id="header">
<!--begin header-->
<div id="header-top">
<div id="left"><img src="images/LFMD_Logo_white.png" style="border: none" />
</div>
<div id="right">
<p>
(415) 655.7546
</p>
</div>
</div><!--end header top-->
<div id="menu" class="menu">
<!--begin menu-->
<ul>
<li>
<a href="#"><span class="out"> <span class="out">Link1</span> <span class="over"></span> </span><span class="bg"></span><span class="over"> </span></a>
</li>
<li>
<a href="#"><span class="out">Link2</span><span class="bg"></span><span class="over"></span></a>
</li>
<li>
<a href="#"><span class="out">Link3</span><span class="bg"></span><span class="over"></span></a>
</li>
<li>
<a href="#"><span class="out">Link4</span><span class="bg"></span><span class="over"></span></a>
</li>
<li>
<a href="#"><span class="out">Link5</span><span class="bg"></span><span class="over"></span></a>
</li>
</ul>
</div><!--end menu-->
</div><!--end header-->
</div>
</body>
</html>
JavaScript:
$(document).ready(function() {
/// wrap inner content of each anchor with first layer and append background layer
$("#menu li a").wrapInner('<span class="out"></span>').append('<span class="bg"></span>');
// loop each anchor and add copy of text content
$("#menu li a").each(function() {
$('<span class="over">' + $(this).text() + '</span>').appendTo(this);
});
$("#menu li a").hover(function() {
// this function is fired when the mouse is moved over
$(".out", this).stop().animate({
'top' : '45px'
}, 250);
// move down - hide
$(".over", this).stop().animate({
'top' : '0px'
}, 250);
// move down - show
$(".bg", this).stop().animate({
'top' : '0px'
}, 120);
// move down - show
}, function() {
// this function is fired when the mouse is moved off
$(".out", this).stop().animate({
'top' : '0px'
}, 250);
// move up - show
$(".over", this).stop().animate({
'top' : '-45px'
}, 250);
// move up - hide
$(".bg", this).stop().animate({
'top' : '-45px'
}, 120);
// move up - hide
});
$("#menu2 li a").wrapInner('<span class="out"></span>');
$("#menu2 li a").each(function() {
$('<span class="over">' + $(this).text() + '</span>').appendTo(this);
});
$("#menu2 li a").hover(function() {
$(".out", this).stop().animate({
'top' : '45px'
}, 200);
// move down - hide
$(".over", this).stop().animate({
'top' : '0px'
}, 200);
// move down - show
}, function() {
$(".out", this).stop().animate({
'top' : '0px'
}, 200);
// move up - show
$(".over", this).stop().animate({
'top' : '-45px'
}, 200);
// move up - hide
});
});