Начало
Навигация
Меню прокрутки
Сценарий "прокрутки" серии пунктов меню на страницу.
Wow!
Look at this!
Your menu can
scroll onto
the screen!
Nestcape 4+ only!
JavaScript Navigation: Меню прокрутки
<!-- THREE STEPS TO INSTALL MENU SCROLL: 1. Paste the coding into the HEAD of your HTML document 2. Copy the onLoad event handler into the BODY tag 3. Add the last code to the BODY of your HTML document --> <!-- STEP ONE: Copy this code into the HEAD of your HTML document --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <! > <! > <!-- Begin function buildMenu() { speed=35; topdistance=100; items=6; y=-50; ob=1; if (navigator.appName == "Netscape") { v=".top=",dS="document.",sD=""; } else { v=".pixelTop=",dS="",sD=".style"; } } function scrollItems() { if (ob<items+1) { objectX="object"+ob; y+=10; eval(dS + objectX + sD + v + y); if (y<topdistance) setTimeout("scrollItems()",speed); else y=-50, topdistance+=40, ob+=1, setTimeout("scrollItems()",speed); } } // End --> </SCRIPT> <!-- STEP TWO: Add this onLoad event handler into the BODY tag --> <BODY onLoad="buildMenu(), scrollItems();"> <!-- STEP THREE: Add the following code to the BODY of your HTML page --> <div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <table border=1 width=150 bgcolor=80FFFF> <td><center> <a href=http://yoursite.com/page1.html>Link 1!</a> </center></td> </table> </div> <div id="object2" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <table border=1 width=150 bgcolor=80FFFF> <td><center> <a href=http://yoursite.com/page2.html>Link 2!</a> </center></td> </table> </div> <div id="object3" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <table border=1 width=150 bgcolor=80FFFF> <td><center> <a href=http://yoursite.com/page3.html>Link 3!</a> </center></td> </table> </div> <div id="object4" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <table border=1 width=150 bgcolor=80FFFF> <td><center> <a href=http://yoursite.com/page4.html>Link 4!</a> </center></td> </table> </div> <div id="object5" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <table border=1 width=150 bgcolor=80FFFF> <td><center> <a href=http://yoursite.com/page5.html>Link 5!</a> </center></td> </table> </div> <div id="object6" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <table border=1 width=150 bgcolor=80FFFF> <td><center> <a href=http://yoursite.com/page6.html>Link 6!</a> </center></td> </table> </div> <!-- Script Size: 2.65 KB -->