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>
