Drop-Down Menu problems

G

gmshed

New Member
Messages
10
Reaction score
0
Points
0
I'm making a smooth drop-down menu for a site. You hover over the button, the menu drops down, you leave the menu, it scrolls back up.

To see it, go to www.gmshed.com/skyfire and hover over "World in War".

Problems:
If you hover over the button, and then leave the button when the menu's scrolled down, not moving over the menu, it stays up.
If you move the cursor around the menu while it's open, it closes
If you hover over a button in the menu, it closes

Script:
Code: 
image1 = new Image();
image1.src = 'images/nav_button_hover.png';
image2 = new Image();
image2.src = 'images/game_button_hover.png';
image3 = new Image();
image3.src = 'images/menu_button_hover.png';
open['wiwmenu'] = 0;
stayopen = false;
function hoverButton(button)
{
  document.getElementById(button).className = 'navbuttonhover';
}
function restoreButton(button)
{
  document.getElementById(button).className = 'navbutton';
}
function pressButton(button)
{
  document.getElementById(button).className = 'navbutton';
}
function releaseButton(button,page)
{
  document.getElementById(button).className = 'navbuttonhover';
  document.location = page;
}
function gHoverButton(button)
{
  document.getElementById(button).className = 'gamebuttonhover';
}
function gRestoreButton(button)
{
  document.getElementById(button).className = 'gamebutton';
}
function gPressButton(button)
{
  document.getElementById(button).className = 'gamebutton';
}
function gReleaseButton(button,game)
{
  document.getElementById(button).className = 'gamebuttonhover';
}
function mHoverButton(button)
{
  document.getElementById(button).className = 'menubuttonhover';
}
function mRestoreButton(button)
{
  document.getElementById(button).className = 'menubutton';
}
function mPressButton(button)
{
  document.getElementById(button).className = 'menubutton';
}
function mReleaseButton(button,page)
{
  document.getElementById(button).className = 'menubuttonhover';
  document.location = page;
}
function openMenu(menu,mheight,speed)
{
  currentheight = document.getElementById(menu).style.height.replace('px','')*1;
  intervalo = setInterval('rollOutMenu("'+menu+'",'+mheight+','+speed+');',1);
  open[menu] = 2;
}
function closeMenu(menu,speed)
{
  currentheight = document.getElementById(menu).style.height.replace('px','')*1;
  interval = setInterval('rollInMenu("'+menu+'",'+speed+');',1);
  open[menu] = 3;
}
function rollOutMenu(menu,mheight,speed)
{
  if (currentheight<mheight)
  {
      currentheight += speed;
      document.getElementById(menu).style.height = currentheight+'px';
      document.getElementById(menu+'box').style.height = 30+currentheight+'px';
      //document.getElementById(menu+'click').style.height = 30+currentheight+'px';
  }
  else
  {
      document.getElementById(menu).style.height = mheight+'px';
      document.getElementById(menu+'box').style.height = mheight+30+'px';
      //document.getElementById(menu+'click').style.height = mheight+30+'px;';
      clearInterval(intervalo);
      open[menu] = 1;
  }
}
function rollInMenu(menu,speed)
{
  if (currentheight>1)
  {
      currentheight -= speed;
      document.getElementById(menu).style.height = currentheight+'px';
      document.getElementById(menu+'box').style.height = 30+currentheight+'px';
      //document.getElementById(menu+'click').style.height = 30+currentheight+'px';
  }
  else
  {
      document.getElementById(menu).style.height = '1px';
      document.getElementById(menu+'box').style.height = '32px';
      //document.getElementById(menu+'click').style.height = '32px;';
      clearInterval(interval);
      open[menu] = 0;
  }
}

CSS:
Code: 
.gamebutton { width: 100px; height: 32px; background-image: url('game_button.png'); margin-right: 20px; cursor: pointer; position: absolute; }
.gamebuttonhover { width: 100px; height: 32px; background-image: url('game_button_hover.png'); margin-right: 20px; cursor: pointer; position: absolute; }
.menu { width: 100px; height: 32px; padding: 0px; margin-top: 12px; }
.menunw { width: 15px; height: 15px; background-image: url('menu_nw.png'); }
.menune { width: 15px; height: 15px; background-image: url('menu_ne.png'); }
.menusw { width: 15px; height: 15px; background-image: url('menu_sw.png'); }
.menuse { width: 15px; height: 15px; background-image: url('menu_se.png'); }
.menun { height: 15px; background-image: url('menu_n.png'); }
.menus { height: 15px; background-image: url('menu_s.png'); }
.menue { width: 15px; background-image: url('menu_e.png'); }
.menuw { width: 15px; background-image: url('menu_w.png'); }
.menumid { background-color: #000000; }
.menutable { position: absolute; width: 100px; height: 32px; overflow: hidden; }
.menubutton { width: 64px; height: 24px; background-image: url('menu_button.png'); margin-top: 8px; cursor: pointer; }
.menubuttonhover { width: 64px; height: 24px; background-image: url('menu_button_hover.png'); margin-top: 8px; cursor: pointer; }

Code on page:
Code: 
<center><div class="menu" id="wiwmenubox" onmouseover="setTimeout('if (open[\'wiwmenu\']==0) { openMenu(\'wiwmenu\',100,5); }',1);" onmouseout="setTimeout('if (open[\'wiwmenu\']==1 && !stayopen) { closeMenu(\'wiwmenu\',5); }',2);">
<table class="menutable" cellspacing="0" cellpadding="0" onmouseover="setTimeout('stayopen = false;',2);">
<tr><td class="menunw"></td><td class="menun"></td><td class="menune"></td></tr>
<tr><td class="menuw"></td><td class="menumid"><div id="wiwmenu" style="height: 1px; overflow: hidden; ">
<br />
<table cellspacing="0" class="menubutton" id="wiwinfobutton" onmouseover="stayopen = true; mHoverButton('wiwinfobutton');" onmouseout="mRestoreButton('wiwinfobutton');" onmousedown="mPressButton('wiwinfobutton');" onmouseup="mReleaseButton('wiwinfobutton','wiwinfo');"><tr><td><center><b><span style="margin: 8px;">Info</span></b></center></td></tr></table>
</div></td><td class="menue"></td></tr>
<tr><td class="menusw"></td><td class="menus"></td><td class="menuse"></td></tr>
</table>
<table class="gamebutton" id="wiwbutton" cellspacing="0" onmouseover="gHoverButton('wiwbutton');" onmouseout="stayopen = true; gRestoreButton('wiwbutton');" onmousedown="gPressButton('wiwbutton');" onmouseup="gReleaseButton('wiwbutton','1');"><tr><td><center><b>World in War</b></center></td></tr></table>
</div></center>


If anyone could help, I'd really appreciate it. make sure you go to www.gmshed.com/skyfire so you can understand what I mean. Plus all the javascript's at www.gmshed.com/skyfire/scripts/skyfire.js, and the css is at www.gmshed.com/skyfire/images/style.css. I just put it here to make it more convenient.
 
websoul

websoul

New Member
Messages
39
Reaction score
0
Points
0
why u r doing on mouseout
close that or hide div or apply the style when some other menu is clicked.U can do it by java scripts.identify the active menu and set its style as u want...

Hope this help
 
W

woiwky

New Member
Messages
390
Reaction score
0
Points
0
Well he said he wants the effect to take place when the user's mouse leaves that area, not when they click another menu. However I do agree this could be coded a bit better.

But anyway, I think if you change

Code: 
<table class="menutable" cellspacing="0" cellpadding="0" onmouseover="setTimeout('stayopen = false;',2);">

to..

Code: 
<table class="menutable" cellspacing="0" cellpadding="0" onmouseout="stayopen=false" onmouseover="stayopen=true">

and

Code: 
<table class="gamebutton" id="wiwbutton" cellspacing="0" onmouseover="gHoverButton('wiwbutton');" onmouseout="stayopen = true; gRestoreButton('wiwbutton');" onmousedown="gPressButton('wiwbutton');" onmouseup="gReleaseButton('wiwbutton','1');">

to...

Code: 
<table class="gamebutton" id="wiwbutton" cellspacing="0" onmouseover="stayopen=true; gHoverButton('wiwbutton');" onmouseout="stayopen = false; gRestoreButton('wiwbutton');" onmousedown="gPressButton('wiwbutton');" onmouseup="gReleaseButton('wiwbutton','1');">

then it'll work the way you want it to.
 
G

gmshed

New Member
Messages
10
Reaction score
0
Points
0
woiwky said:
Well he said he wants the effect to take place when the user's mouse leaves that area, not when they click another menu. However I do agree this could be coded a bit better.

But anyway, I think if you change

Code: 
<table class="menutable" cellspacing="0" cellpadding="0" onmouseover="setTimeout('stayopen = false;',2);">
to..

Code: 
<table class="menutable" cellspacing="0" cellpadding="0" onmouseout="stayopen=false" onmouseover="stayopen=true">
and

Code: 
<table class="gamebutton" id="wiwbutton" cellspacing="0" onmouseover="gHoverButton('wiwbutton');" onmouseout="stayopen = true; gRestoreButton('wiwbutton');" onmousedown="gPressButton('wiwbutton');" onmouseup="gReleaseButton('wiwbutton','1');">
to...

Code: 
<table class="gamebutton" id="wiwbutton" cellspacing="0" onmouseover="stayopen=true; gHoverButton('wiwbutton');" onmouseout="stayopen = false; gRestoreButton('wiwbutton');" onmousedown="gPressButton('wiwbutton');" onmouseup="gReleaseButton('wiwbutton','1');">
then it'll work the way you want it to.
Click to expand...

Thanks, it's working now.
With all the timeouts and stayovers I was getting confused with my own code.
 
You must log in or register to reply here.
Top