.animate question/help
Posted
by Josh
on Stack Overflow
See other posts from Stack Overflow
or by Josh
Published on 2010-03-29T17:04:06Z
Indexed on
2010/03/29
21:23 UTC
Read the original article
Hit count: 429
So, I've built this navigation bar so far and I'm curious if it's even possible to achieve what I'm thinking. Currently, when you hover over each of the links they drop down (padding is increased).
Now, what I'm curious in doing is if you hover over say "test1", test2-4 also drop with it but in the padding that has been created from the drop down, "test1" information shows up. Allowing the user to click or read whatever information is in there. Also, if the user would like to, they can move their mouse to test2 and everything would animate (opacity, this I can do I think) to whatever is in the test2 field, test3 doing the same and so on.
I haven't had much success with this, I've created a completely separate panel before, but that didn't exactly work or I wasn't doing it correctly.
Here is what I've been working on, ANY help would be appreciated! Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#nav li > a").hover(function() {
$(this).stop().animate({paddingTop: "100px"}, 100);
},
function() {
$(this).stop().animate({paddingTop: "10px"}, 200);
});
});
</script>
<style type="text/css">
#nav
{
position: absolute;
top: 0;
left: 60px;
padding: 0;
margin: 0;
list-style: none;
}
#nav li
{
display: inline;
}
#nav li a
{
float: left;
display: block;
color: #555;
text-decoration: none;
padding: 10px 30px;
background-color: #d1d1d1;
border-top: none;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="nav">
<li><a href="">test1</a></li>
<li><a href="">test2</a></li>
<li><a href="">test3</a></li>
<li><a href="">test4</a></li>
</ul>
</div>
</body>
</html>
© Stack Overflow or respective owner
