LinkBack URL
About LinkBacks
Drop-Down Menu problems
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:
CSS: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; } }
Code on page: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:<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.
Reply With Quote
Originally Posted by woiwky
