...

View Full Version : Help with Menu Hover effect



mikemcg36
01-12-2012, 08:56 PM
Help,

I have a navigation menu that has a flyin effect for each item using Javascript. Right now, The Javascript flys in a picture (in the same location) no matter what item you hover over. How can I get it to fly into a different position for each item.

Here is my 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" xml:lang="en" lang="en">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script src="hoverIntent.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {

$("#nav a").append("<em></em>");
$("#nav a").hoverIntent(function () {
$(this).find("em").animate({ opacity: "show", top: "-34" }, "fast");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function () {
$(this).find("em").animate({ opacity: "hide", top: "-43" }, "fast");
});


});
</script>

<style type="text/css">

body {
margin: 0px;
}
#nav
{
border-top: 2px solid #000;
border-bottom:2px solid #000;
width: 100%;
height: 36px;
line-height: 36px;
float: left;
background:url("images/OFF2.gif") repeat-x top left;
}
#nav ul {
list-style: none;
width: 900px;
margin: 0 auto;
padding: 0;
position:relative;
}
#nav li {
float: left;
}
#nav li em {
background: url(images/home.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -43px;
left: 0px;
padding: 20px 12px 10px;
z-index: 1;
display: none;
}
#nav li a {
font-family:"Georgia", "Sans-Serif";
display: inline-block;
text-decoration: none;
font-size:medium;
padding: 0px 5px;
text-align:center;
color: #000;
width:110px;
height: 36px;
line-height: 36px;
background:transparent url("images/off.gif") no-repeat top right;
}
#nav li a:hover {
font-family:"Georgia", "Sans-Serif";
display: inline-block;
text-decoration: none;
font-weight:bold;
font-size:medium;
padding: 0px 5px;
width:110px;
height: 36px;
line-height: 36px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
</ul>
</div>
</body>
</html>


Thank you!

mikemcg36
01-12-2012, 10:19 PM
I think I will need a loop.

If (user hovers over option 1 - or a certain class)

do this......

If (user hovers over option 2 - or a certain class)

do this......

mikemcg36
01-13-2012, 07:30 PM
Still struggling with this one.

bueller....

blaze4218
01-13-2012, 07:54 PM
Move your question to the jQuery forum for a quicker response...
also, a link to the hoverIntent lib might help...

Since I can't work the problem without jQuery and hoverIntent I'll make a guess...

Assuming you set the "fly in" position with top: "-34" I would change that to a variable, and modify that variable with a hover. The js might look like this:


FlyIn = "34";

$(document).ready(function () {

$("#nav a").append("<em></em>");
$("#nav a").hoverIntent(function () {
$(this).find("em").animate({ opacity: "show", top: FlyIn }, "fast");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function () {
$(this).find("em").animate({ opacity: "hide", top: "-43" }, "fast");
});


document.getElementById("Item1").onmouseover = function () {FlyIn = "34";}
document.getElementById("Item2").onmouseover = function () {FlyIn = "64";}
document.getElementById("Item3").onmouseover = function () {FlyIn = "94";}
document.getElementById("Item3").onmouseover = function () {FlyIn = "124";}
});

but that's making a few assumptions, also I'm sure jQuery has a shorthand for document.getElementById...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum