slideDown outside of table row on hover
I have the following:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
</head>
<body>
<table border="1">
<tr>
<td>Column 1</td>
<td>Column x</td>
<td>
<div class="avail">Available Options</div>
<ul class="menu">
<li><a href="A.htm">Menu A</a></li>
<li><a href="B.htm">Menu B</a></li>
<li><a href="C.htm">Menu C</a></li>
</ul>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column x</td>
<td>
<div class="avail">Available Options</div>
<ul class="menu">
<li><a href="A.htm">Menu A</a></li>
<li><a href="C.htm">Menu C</a></li>
<li><开发者_开发百科a href="D.htm">Menu D</a></li>
</ul>
</td>
</tr>
</table>
<script>
$('.menu').hide();
$('.avail').hover(function() {
$(this).next().slideDown('slow')
,
$(this).next().slideUp('slow');
});
</script>
</body>
</html>
What I would like is for the menus to slide down over top of the rows that are beneath them. Think of a window shade being drawn over top of row 2 if they hover over row 1.
Right now it's expanding the table row itself. Maybe I should put columns 1-x in divs that are float left. Probably need to use hoverIntent, too.
You should be able to pull this off with just some css.
.menu{
position:absolute;
background-color:white;
}
Example on jsfiddle.
加载中,请稍侯......
精彩评论