Phiên bản đầy đủ: jsB@nk » Trình đơn » Có thể di chuyển » Menu di chuyển xuống
URL: https://www.javascriptbank.com/move-down-menu.html
Đoạn mã tạo một trình đơn với các mục chọn nằm ẩn ở phía trên trang web, mỗi khi người dùng rê con trỏ chuột đến tiêu đề của trình đơn thì các nó sẽ trượt xuống.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Có thể di chuyển » Menu di chuyển xuống
URL: https://www.javascriptbank.com/move-down-menu.html
<STYLE>BODY {FONT-FAMILY: arial}A {FONT-WEIGHT: bold; COLOR: black; TEXT-DECORATION: none}A:hover {COLOR: black; TEXT-DECORATION: underline}TD.menu {BACKGROUND: lightblue}TD.menu:hover {BACKGROUND-COLOR: #ff9933}TABLE.navigatie {FONT-WEIGHT: bold; FONT-SIZE: 80%; BACKGROUND: black; LEFT: 0px; LINE-HEIGHT: normal; FONT-STYLE: normal; POSITION: relative; TOP: -119px; FONT-VARIANT: normal}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT>// author: Alex Jeurissenvar pos = -119;var timer1 = 0;var timer2 = 0;;var stap = 3;function toonMenu1() {// stop functie verberg en start functie toonclearInterval(timer1)timer2 = setInterval("toon1()",10)} // einde toonMenufunction verbergMenu1() {// stop functie toon en start functie verbergclearInterval(timer2)timer1 = setInterval("verberg1()",10)} //einde verbergMenufunction toon1(){if (pos < -12) {pos = pos + stapdocument.getElementById('mijnMenu1').style.top = pos} // einde if} // einde toonfunction verberg1(){if (pos > -119) {pos = pos -stapdocument.getElementById('mijnMenu1').style.top = pos} // einde if} // einde verberg var pos2 = -119;var timer3 = 0;var timer4 = 0;;var stap = 3;function toonMenu2() {// stop functie verberg en start functie toonclearInterval(timer3)timer4 = setInterval("toon2()",10)} // einde toonMenufunction verbergMenu2() {// stop functie toon en start functie verbergclearInterval(timer4)timer3 = setInterval("verberg2()",10)} //einde verbergMenufunction toon2(){if (pos2 < -12) {pos2 = pos2 + stapdocument.getElementById('mijnMenu2').style.top = pos2} // einde if} // einde toonfunction verberg2(){if (pos2 > -119) {pos2 = pos2 -stapdocument.getElementById('mijnMenu2').style.top = pos2} // einde if} // einde verberg var pos3 = -119;var timer5 = 0;var timer6 = 0;;var stap = 3;function toonMenu3() {// stop functie verberg en start functie toonclearInterval(timer5)timer6 = setInterval("toon3()",10)} // einde toonMenufunction verbergMenu3() {// stop functie toon en start functie verbergclearInterval(timer6)timer5 = setInterval("verberg3()",10)} //einde verbergMenufunction toon3(){if (pos3 < -12) {pos3 = pos3 + stapdocument.getElementById('mijnMenu3').style.top = pos3} // einde if} // einde toonfunction verberg3(){if (pos3 > -119) {pos3 = pos3 -stapdocument.getElementById('mijnMenu3').style.top = pos3} // einde if} // einde verberg </SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE height=85 width=1057 border=0> <TBODY> <TR> <TD width=152 height=112> <TABLE class=navigatie id=mijnmenu1 onmouseover=toonMenu1() style="WIDTH: 152px; HEIGHT: 122px" onmouseout=verbergMenu1()> <TBODY> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item1</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item2</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item3</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item4</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item5</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #004466" height=18><FONT color=#ffffff>menu1</FONT></TD></TR></TBODY></TABLE></TD> <TD width=152 height=112> <TABLE class=navigatie id=mijnmenu2 onmouseover=toonMenu2() style="WIDTH: 152px; HEIGHT: 122px" onmouseout=verbergMenu2()> <TBODY> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item1</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item2</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item3</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item4</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item5</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #004466" height=18><FONT color=#ffffff>menu2</FONT></TD></TR></TBODY></TABLE></TD> <TD width=152 height=112> <TABLE class=navigatie id=mijnmenu3 onmouseover=toonMenu3() style="WIDTH: 152px; HEIGHT: 122px" onmouseout=verbergMenu3()> <TBODY> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item1</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item2</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item3</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item4</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #ffffff"><A href="http://alexj.to.md/">menu item5</A></TD></TR> <TR> <TD class=menu style="BACKGROUND-COLOR: #004466" height=18><FONT color=#ffffff>menu3</FONT></TD></TR></TBODY></TABLE></TD> <TD width=583 height=112> </TD></TR></TBODY></TABLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->