plimpton
asked on
Sliding menu mouseover/mouseout using scriptaculous
Experts,
I've built a navigation menu that slides up from the footer of a web page using scriptaculous effect.morph. Onclick it expands up and on the next click, it colapses and works great. Now I need to have this behavior work onmouseover (up) and onmouseout (down). My attempts have been unsuccessful, as I've expereinced "bouncing" from the menu as it moves up (once the original bar moves off the mouse it seems to detect a mouseout and colapses before it's fully open) and also blinking when trying various combinations of effects. I have attached the page which includes all the css and javascript in the <head> tag, and you can see the js libraries I'm including as well.
I've built a navigation menu that slides up from the footer of a web page using scriptaculous effect.morph. Onclick it expands up and on the next click, it colapses and works great. Now I need to have this behavior work onmouseover (up) and onmouseout (down). My attempts have been unsuccessful, as I've expereinced "bouncing" from the menu as it moves up (once the original bar moves off the mouse it seems to detect a mouseout and colapses before it's fully open) and also blinking when trying various combinations of effects. I have attached the page which includes all the css and javascript in the <head> tag, and you can see the js libraries I'm including as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sliding Footer Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
<script src="javascripts/effects.js" type="text/javascript"></script>
<style type="text/css">
body {
text-align: center;
background-color: #6A6A6A;
font-family: Helvetica,Arial,Tahoma, sans-serif;
}
#p_background {
background-color: #808081;
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
width: 800px;
height: 514px;
position: relative;
}
.clearfooter {
height: 0px;
clear: both;
}
</style>
<script type="text/javascript">
var toggle = true;
function menu_expand ()
{
if (toggle) {
new Effect.Morph('menu', { style: { height: '191px', top:'323px' }, duration: 0.8 });
toggle=false;
}
else {
new Effect.Morph('menu', { style: { height: '23px', top:'494px' }, duration: 0.8 });
toggle=true;
}
}
</script>
</head>
<body>
<div id="p_background"><!--container-->
<div style="color: #fff; position: absolute; top: 200px; left:200px;">
PAGE CONTENT:
</div>
<div class="clearfooter"></div>
<div id="demo" style="margin: 0 auto;">
<div id="menu" style="text-align: left; position: absolute; left: 0px; top:494px; width:800px; height: 23px; overflow:hidden;" onclick="javascript: menu_expand();" >
<table style="font-family: arial; font-size: 13px; font-weight: 600; color: #fff; background: #000; background-repeat: no-repeat; width: 800px;" cellpadding="0" cellspacing="0">
<TR>
<TD WIDTH=259 HEIGHT=23 style="padding-top: 3px; padding-left: 5px;" >
NAVIGATION |
</TD>
<TD WIDTH=7 HEIGHT=23>
</TD>
<TD WIDTH=534 HEIGHT=23 style="padding-top: 2px; padding-left: 5px;">
PRESS
</TD>
</TR>
<TR>
<TD WIDTH=259 HEIGHT=168>
<table style="color: #fff;">
<tr>
<td></td>
<td>
HOME
</td>
</tr>
<tr>
<td></td>
<td>
ABOUT
</td>
</tr>
<tr>
<td></td>
<td>
FEATURES
</td>
</tr>
<tr>
<td></td>
<td>
RECIPES
</tr>
<tr>
<td></td>
<td>
ARCHIVES
</tr>
<tr>
<td></td>
<td>
ETC
</tr>
<tr>
<td></td>
<td>
PRESS
</tr>
</table>
</TD>
<TD WIDTH=7 HEIGHT=168>
</TD>
<TD WIDTH=534 HEIGHT=168 VALIGN="top">
<!--Press mid-page area -->
<Div style="margin-top: 14px; margin-left: 10px;">
<table cellpadding="0" cellspacing="0" style="color: #fff;">
<tr valign="top">
<td>
<img src="images/press/pressImg1.jpg">
</td>
<td style="padding-left: 15px;">
PRESS
<div style="font-family:
Helvetica;color:#fff; margin-top: 10px; width: 200px;">Learn how the aesthetics of the anticipated final
restorations influence case planning and treatment.
</div>
<div style="margin-top: 50px;">
<a href="press.htm">
<img src="images/press/readmore_btn.jpg" border="0">
</a>
</div>
</td>
</tr>
</table>
</Div>
</TD>
</TR>
</table>
</div>
</div>
</div> <!--container-->
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER