Hi,
I currently have this menu http://valkesh.000space.com and what I
would like to do is get the image on the item to Fade In and Fade Out.
Im not sure if im using the correct concept of javascript, but the
thing is I would like the 'hovering' images to be split into 2, so
that the 'center' can grow according to the width of the <li> item,
rather than having everything fixed width.
Also, if there is a way to simplify what I am doing, please let me
know, because I am currently using a sort of lavalamp concept but
hiding the 'move' process from one <li> to the other. I just want the
hover effect, but with the option of having a hover based on 2-3
images.
Basically the entire code is the following -
<style type="text/css">
ul.nav { list-style:none; overflow:hidden; }
ul.nav li { float:left; height:39px; background-color:#666666;
padding:0 5px; }
ul.nav li.last { -moz-border-radius-topright:9px; -webkit-border-top-
right-radius:9px;
-moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:
9px;
}
ul.nav li.bg { margin:7px 0px 0px 3px; padding-right:8px;
position:absolute; z-index:50; left:155px; width:60px; background:url
(bg-right.png) no-repeat right top; }
ul.nav li .left{ background:url(bg.png) no-repeat left top; height:
39px; }
ul.nav li a {padding:8px 20px; color:#000000; font-size:18px; font-
weight:bold; display:block; text-decoration:none; z-index:100;
position:relative; }
</style>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#nav1 li.bg').css({opacity: 0, visibility: "visible"});
$('#nav1 li a').hover(function()
{
var offset=$(this).offset();
var thiswidth =$(this).width()+13;
$('#nav1 li.bg').stop().animate({left:offset.left
+"px",width:thiswidth+"px"},100);
$('#nav1 li.bg').css({opacity: 0, visibility:
"visible"}).animate({opacity: 100});
},
function()
{
$('#nav1
li.bg').stop().animate({left:"155px",width:"60px"},100);
$('#nav1 li.bg').css({opacity: 0, visibility: "visible"});
});
});
</script>
<body>
<div class="menucontainer" style="margin-top:15px;">
<ul class="nav" id="nav1">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li class="bg"><div class="left"></div></li>
</ul>
</div>
Thanks
