Full version: jsB@nk » Menu » Navigation » Drop Down Menu 4.0
URL: https://www.javascriptbank.com/drop-down-menu-40.html
A different script to create a dropdown menu.
Full version: jsB@nk » Menu » Navigation » Drop Down Menu 4.0
URL: https://www.javascriptbank.com/drop-down-menu-40.html
<style type="text/css">td{font-family:tahoma;font-size:10pt}body{font-family:tahoma;font-size:10pt}A:hover{color:blue;text-decoration:underline}a{text-decoration:none}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="JavaScript"><!-- //******INSTRUCTIONS******///*READ THESE INSTRUCTIONS AND CHANGE THE VARIABLES ACCORDINGLY*/var menu_speed=20;/* menu_speed - this value allows you to change the speed of the menu. (1 to 20) (1 is the slowest) Note that the lower the speed the smoother the menu is *//*someday maybe i'll also add - menu_acceleration :) */var menu_width=150;/* menu_width - this special value allows you to change the width of all the menus.It is so adjustable that it keeps you wondering how this was done.NOTE : that all menu widths are equal and determinted by this value only.To try it : Change it to 125, preview it, then change it to 225 and see the difference!Don't go below 100 since it'll look too cramped up,*/menu_height=350;/* menu_height - you wouldn't want to modify this in any way, except if one of the menus is appearing a little lower that the others (that happens in case a menu item is way too long and the menu has failed to auto adjust) So all you have to do is keep increasing the height by 5 and checking each time to see if it appears properly. To try this : Enter 300 as the height and see the 2nd menu which has a long menu item. So you'll go about increasing it : 305, 310 ...... OK done. But to be on the safer side increase it further by 50. hence the 350.So you see that a big value will do no harm. But then again the user is using a browser which gives a non-scrolling height of bout 400 (so you should not go above 400). Mostly you won't have problems since many items are not required in 1 single menu (you could use the other ones or add more) Flexible, isn't it?*/var instant_close=1;/* instant_close - if you want the menu to close as soon as the user leaves the menu, set this value to 1 else 0 */var total=3;/* total - the total number of menus you want to have.IMP : You have to also add the menus and its items, so just increasing this won't do. So read on... *//*Look out for ******* ADDING ANOTHER MENU *******further down somewhere in the page....*///Don't change anything after this line unless you know what youre doing//Cheers from Schubertif (menu_speed > 20){menu_speed=20;}if(document.all){ doc = "document.all"; sty = ".style"; htm = ""}else if(document.layers){ doc = "document"; sty = ""; htm = ".document"}function positionLayers(num){abcObj = eval(doc + '["Lyr"+num+""]' + sty);abcObj.left = (menu_width*num)+5;//abcObj.top=-265;abcObj.top=-(menu_height-35);abcObj.width=menu_width;abcObj.height=menu_height; }function pullitup(num){abcObj = eval(doc + '["Lyr"+num+""]' + sty);if (window.dropdown){clearInterval(dropdown)}pullup=setInterval("uplift()",1)}function dropitdown(num){closeothers(num);abcObj = eval(doc + '["Lyr"+num+""]' + sty);if (window.pullup){clearInterval(pullup)}dropdown=setInterval("downlift()",1)}function uplift() {var x_pos1 = parseInt(abcObj.top); if(x_pos1 >= -(menu_height-40) ) {if(instant_close==1){abcObj.top=-(menu_height-35);}else if(instant_close==0){abcObj.top = x_pos1-menu_speed;}}else if (window.pullup){clearInterval(pullup);}}function downlift() {var x_pos1 = parseInt(abcObj.top); if(x_pos1 < 0) { abcObj.top = x_pos1+menu_speed;}else if (window.dropdown){clearInterval(dropdown);}}function info(){alert("This script is copyrighted to Schubert - schubert_94_2000@yahoo.com.");}function start(){for(x=0;x<total;x++){positionLayers(x);}}function closeothers(num){for(x=0;x<total;x++){if(x==num){continue;}abcObj = eval(doc + '["Lyr"+x+""]' + sty);abcObj.top = -(menu_height-35);}}// end it--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload="start()"><div id="Lyr0" onmouseover="dropitdown(0)" onmouseout="pullitup(0)" style="position: absolute; z-index: 100; visibility: visible;"><table bgcolor="#ffffff" width="100%" height="100%" border="6" bordercolor="#000000" bordercolordark="#000000" bordercolorlight="#808080" cellspacing="0" cellpadding="4"><tbody><tr><td align="center" valign="middle"><a href="http://JavaScriptBank.com/">Home Page</a></td></tr><tr><td align="center" valign="middle"><a href="http://www.yahoo.com/">Yahoo.com</a></td></tr><tr><td align="center" valign="middle"><a href="http://www.google.com/">Google.com</a></td></tr><tr><td align="center" valign="middle"><a href="http://www.f1.com/">Formula One</a></td></tr><tr><td align="center" valign="middle"><a href="http://JavaScriptBank.com/">Free Scripts</a></td></tr><tr><td align="center" valign="middle" height="30"><font size="-1"><b><u>Main</u></b></font></td></tr></tbody></table></div><!--END MENU 0--><!--START MENU 1--><div id="Lyr1" onmouseover="dropitdown(1)" onmouseout="pullitup(1)" style="position: absolute; z-index: 100; visibility: visible;"><table bgcolor="#ffffff" width="100%" height="100%" border="6" bordercolor="#000000" bordercolordark="#000000" bordercolorlight="#808080" cellspacing="0" cellpadding="4"><tbody><tr><td align="center" valign="middle"><a href="#">Menu item 1</a></td></tr><tr><td align="center" valign="middle"><a href="#">Menu item 2</a></td></tr><tr><td align="center" valign="middle"><a href="#">Menu item 3</a></td></tr><tr><td align="center" valign="middle"><a href="#">Menu item 4</a></td></tr><tr><td align="center" valign="middle"><a href="#">Menu item 5</a></td></tr><tr><td align="center" valign="middle"><a href="#">Menus are adjustable to long text items like this one.<br>Look, look, look how long this menu can get, its almost getting as long as the whole page.</a></td></tr><tr><td align="center" valign="middle" height="30"><font size="-1"><b><u>MENU 2</u></b></font></td></tr></tbody></table></div><!--END MENU 1--><!--START MENU 2--><div id="Lyr2" onmouseover="dropitdown(2)" onmouseout="pullitup(2)" style="position: absolute; z-index: 100; visibility: visible;"><table bgcolor="#ffffff" width="100%" height="100%" border="6" bordercolor="#000000" bordercolordark="#000000" bordercolorlight="#808080" cellspacing="0" cellpadding="4"><tbody><tr><td align="center" valign="middle"><a href="#">Menu item 1</a></td></tr><tr><td align="center" valign="middle"><a href="#">Menu item 2</a></td></tr><tr><td align="center" valign="middle"><a href="#">Menu item 3</a></td></tr><tr><td align="center" valign="middle"><a href="#">Menu item 4</a></td></tr><tr><td align="center" valign="middle"><a href="#">Menu item 5</a></td></tr><tr><td align="center" valign="middle"><a href="javascript:info()">About</a></td></tr><tr><td align="center" valign="middle" height="30"><font size="-1"><b><u>MENU 3</u></b></font></td></tr></tbody></table></div></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->