Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu kéo sổ
URL: https://www.javascriptbank.com/drop-down-menu-40.html
Hiệu ứng tạo ra các trình đơn con ẩn ở phía trên của trang web, để chúng xuất hiện, bạn chỉ cần rê con trỏ chuột vào các trình đơn cha để chúng trượt từ trên xuống.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu kéo sổ
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 - [email protected].");}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-->