Wratox1
Member
- Reaction score
- 22
Hello, i am using a modified version of a jquery menu called "magic line", the demo can be found here. I am using the second menu.
im not experienced with jquery, i do know some javascript, but it feels like jquery is much harder to understand..
well, now to the problem, i have my menu with 3 <li> elements and i have also 3 links, what i want is that when you hover over the links i want the same effect on the links AND on the <li> elements, but the effect should not be applied on the links when you hover over a <li> element.
not sure if that made sense, but, when you hover one of the links, the corresponding <li> element and the link should have this animation
but it should only work one way.
here is the code used for the effect:
and here is my html:
if you have any questions, just ask
//Wratox
im not experienced with jquery, i do know some javascript, but it feels like jquery is much harder to understand..
well, now to the problem, i have my menu with 3 <li> elements and i have also 3 links, what i want is that when you hover over the links i want the same effect on the links AND on the <li> elements, but the effect should not be applied on the links when you hover over a <li> element.
not sure if that made sense, but, when you hover one of the links, the corresponding <li> element and the link should have this animation
but it should only work one way.
here is the code used for the effect:
Code:
// DOM Ready
$(function() {
var $el, leftPos, newWidth;
$mainNav2 = $("#example-two");
/*
EXAMPLE TWO
*/
$mainNav2.append("<li id='magic-line-two'></li>");
var $magicLineTwo = $("#magic-line-two");
$magicLineTwo
.width($(".current_page_item_two").width())
.height($mainNav2.height())
.css("left", $(".current_page_item_two a").position().left)
.data("origLeft", $(".current_page_item_two a").position().left)
.data("origWidth", $magicLineTwo.width())
.data("origColor", $(".current_page_item_two a").attr("rel"));
$("#example-two a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLineTwo.stop().animate({
left: leftPos,
width: newWidth,
backgroundColor: $el.attr("rel")
})
}, function() {
$magicLineTwo.stop().animate({
left: $magicLineTwo.data("origLeft"),
width: $magicLineTwo.data("origWidth"),
backgroundColor: $magicLineTwo.data("origColor")
});
});
/* Kick IE into gear */
$(".current_page_item_two a").mouseenter();
});and here is my html:
HTML:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset='UTF-8'>
<link rel='stylesheet' href='css/style.css'>
<title>WWD</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
<script src='js/jquery.color-RGBa-patch.js'></script>
<script src='js/example.js'></script>
</head>
<body>
<div class="nav-wrap">
<a href="#" id="logo">W</a><a href="#"id="logo2">W</a><a href="#" id="logo3">D</a>
<ul class="group" id="example-two">
<li class="current_page_item_two"><a rel="#990000" name="about" href="./index.php">About</a></li>
<li><a rel="#334D80" name="portfolio" href="./portfolio.php">Portfolio</a></li>
<li><a rel="#C09440" name="contact" href="./contact.php">Contact</a></li>
</ul>
</div>
<div id="container">
</div>
</body>
</html>if you have any questions, just ask
//Wratox
