Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu nhiều cấp ở đầu trang web
URL: https://www.javascriptbank.com/multi-level-pull-down-menu.html
Một đoạn mã JavaScript khác để tạo hiệu ứng trình đơn nhiều cấp luôn ở đầu website.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Menu nhiều cấp ở đầu trang web
URL: https://www.javascriptbank.com/multi-level-pull-down-menu.html
<style type="text/css">#menu {BACKGROUND: lightblue; COLOR: black; CURSOR: default; FONT-FAMILY: verdana; FONT-SIZE: 10pt; FONT-WEIGHT: bold}#menu .popup {BACKGROUND: lightblue; BORDER-BOTTOM: lightblue 12px solid; BORDER-LEFT: lightblue 12px solid; BORDER-RIGHT: lightblue 12px solid; BORDER-TOP: lightblue 12px solid; DISPLAY: none; FONT-FAMILY: verdana; FONT-SIZE: 8px; POSITION: absolute; WIDTH: 160pt}#menu P {MARGIN-BOTTOM: 0pt; MARGIN-TOP: 0pt}A:hover {COLOR: red; TEXT-DECORATION: none}A {COLOR: black; FONT-SIZE:8pt; MARGIN: 5px; TEXT-DECORATION: none}UL {COLOR: black; FONT-SIZE: 10pt; MARGIN: 5px; TEXT-DECORATION: none}LI {COLOR: black; FONT-SIZE: 10pt; MARGIN: 5px; TEXT-DECORATION: none}P {COLOR: black; FONT-SIZE: 10pt; MARGIN: 5px; TEXT-DECORATION: none}.over {COLOR: red}P {TEXT-ALIGN: justify; TEXT-INDENT: 0.1in}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="JavaScript"> var curPop = null; function clearCurrent() { // Hide the pop-up menu that is currently displayed. if (null != curPop) curPop.style.display = ""; curPop = null; } function popup() { clearCurrent(); var el = event.srcElement; // Display a new menu option. if (("P" == el.tagName) && ("menu" == el.parentElement.parentElement.parentElement.parentElement.id)) { // Position and display the pop-up menu. var elpop = document.all[el.sourceIndex + 1]; elpop.style.pixelLeft = el.parentElement.offsetLeft+7; elpop.style.pixelTop = el.offsetTop + document.all.menu.offsetTop+22; elpop.style.display = "block"; curPop = elpop; } event.cancelBubble = true; } function highlight() { // Highlight and popup the menu options. if (null != event.fromElement) if ((event.fromElement.tagName == "P") && (event.fromElement.parentElement.parentElement.parentElement.parentElement.id == "menu")) { event.fromElement.className = ""; } if (null != event.toElement) if ((event.toElement.tagName == "P") && (event.toElement.parentElement.parentElement.parentElement.parentElement.id == "menu")){ popup(); event.toElement.className = "over";} }</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onclick="clearCurrent()"><div style="background: lightblue none repeat scroll 0%; -moz-background-clip: initial; -moz-background-inline-policy: initial; -moz-background-origin: initial;"><table border="0" id="menu" onclick="popup()" onmouseout="highlight();" onmouseover="highlight();"> <tbody> <tr> <td> <a href="http://www.javascripts.com/">Home</a></td> <td bgcolor="black"></td> <td> <p>Some Folder </p> <div class="popup"> <p><a class="anchor" href="http://msdn.microsoft.com/">To Microsoft </a> </p><p><a href="http://www.juventus.com/">To Juventus</a> </p><p><a href="http://www.altavista.com/">To .... </a> </p></div></td> <td bgcolor="black"></td> <td> <p>What I Can</p> <div class="popup"> <p><a href="http://javascriptbank.com/">JavaScriptBank.com</a> </p><p><a href="http://www.learnasp.com/">ASP programming</a> </p><p><a href="http://www.javasoft.com/">Java applets</a> </p><p><a href="http://www.inprise.com/">Delphi programming</a> </p></div></td> <td bgcolor="black"></td> <td> <p>Contact with me</p> <div class="popup"> <p><a href="mailto:[email protected]">just mail me</a> </p></div><p></p></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-->