»
EnglishFrenchVietnamese

Print - Multi Level Menus - JavaScriptBank.com

Full version: jsB@nk » Menu » Multilevel menu » Multi Level Menus
URL: https://www.javascriptbank.com/multi-level-menus.html

Multi Level Menus © JavaScriptBank.comThis is a different script to make multilevel menu when visitors click the links.

Full version: jsB@nk » Menu » Multilevel menu » Multi Level Menus
URL: https://www.javascriptbank.com/multi-level-menus.html



CSS
<style>body,td{font-family: tahoma, helvetica; font-size: 11px;/* color: #FFFF99;*/ scrollbar-base-color: #6699CC;scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color : #000000;scrollbar-arrow-color: #FFFFFF;scrollbar-shadow-color: #336699;scrollbar-track-color: #CAE1FF;} .bold{font-weight: bold}.boldwhite{color: #FFFFFF;font-weight: bold}   br.short{line-height: 4px;} .bright{font-weight: normal;color: #ffffff;} input.ltext{font-family: tahoma, helvetica;font-size: 11px;color: #838383;background: #ffffff;border: solid 1px #FFFF99;padding: 2px;}.orange{font-size: 18pt;font-weight: bold;color: #FF9900} a{color: #FF7800;text-decoration: none;font-weight: bold;} a:hover{text-decoration: underline;}a.nav{color: #FF7800;text-decoration: none;font-weight: normal;text-decoration: none;} a.nav:hover{color: #000000;text-decoration: underline;}a.white{color: #FFFFFF;font-weight: bold;text-decoration: none}a.white:hover{color: #FF9933;text-decoration: underline} .wc{text-align: justify;} .bottom{color: #EDEDED;} a.bottom{font-weight: bold;} form{margin: 0px;}.input{background-color: #FFFFFF; color: #000000; border-style: solid; border-color: #157CD8; border-width: 1px;font-size: 8pt;font-weight: normal;padding: 1px 5px 1px;margin: 1px;scrollbar-base-color: #6699CC;scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color : #000000;scrollbar-arrow-color: #FFFFFF;scrollbar-shadow-color: #336699;scrollbar-track-color: #CAE1FF;}.submit{background: #000000;color: #FFFFFF;font-family: Verdana, Tahoma, Sans Serif;font-size: 8pt;font-weight: bold;cursor: hand;border-style: solid;border-color: #FFFFFF;border-width: 1px;background-image: url(i/bgrad.gif)}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<Script Language=JavaScript>function clickHandler(){var targetId, srcElement, targetElement;srcElement = window.event.srcElement;if (srcElement.className == "Outline"){targetId = srcElement.id + "details";targetElement = document.all(targetId);if (targetElement.style.display == "none"){targetElement.style.display = "";}else{targetElement.style.display = "none";}}}document.onclick = clickHandler;</Script>  </table><SCRIPT language=JavaScript>function disableselect(e){return false}function reEnable(){return true}document.onselectstart=new Function("return false")if(window.sidebar){document.onmousedown=disableselectdocument.onclick=reEnable}var message="";function clickIE(){if(document.all){(message);return false;}}function clickNS(e){if(document.layers||(document.getElementById&&!document.all)){if(e.which==2||e.which==3){(message);return false;}}}if(document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}document.oncontextmenu=new Function("return false")</SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<table border="1" cellpadding="0" width="164" style="border-collapse: collapse" align="center"><tr><td><table border="0" cellpadding="0" style="border-collapse: collapse" width="170"><tr><td valign="top" background="page_bg.gif" width="179"><!-- Banner Text --><table border="0" cellpadding="0" style="border-collapse: collapse" width="159"><tr><td height="26" background="bgmen.gif" style="text-transform: uppercase; font-family: Tahoma; font-size: 10px; color: #FFFFFF; font-weight: bold" width="173"><table border="0" cellpadding="0" style="border-collapse: collapse" width="178"><tr><td height="26" background="bgmen.gif" style="text-transform: uppercase; font-family: Tahoma; font-size: 10px; color: #FFFFFF; font-weight: bold" width="183">MENU</td></tr><td bgcolor="#35609F" width="183"><table border="1" cellpadding="0" style="border-collapse: collapse" width="100%" bordercolor="#FF6666"><tr><td bgcolor="#294A7B" id="Out2" class="Outline" style="cursor: hand; text-transform: uppercase; font-family: Tahoma; font-size: 10px; color: #E2E2E2; font-weight: bold" height="20">&nbsp;&nbsp; Section #</td></tr><tr><td><div id=Out2details style="display:None; position:relative; left:0;"><table border="1" cellpadding="0" style="border-collapse: collapse" width="100%" bordercolor="#CCFFCC" height="82"><tr><td style="cursor: hand" height="18" class="tdmenu" onMouseOver="this.style.background='#30A1DB'" onMouseOut="this.style.background='#0168B3'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a target="I2" href="">Link # in Section #</a></td></tr><tr><td style="cursor: hand" height="18" class="tdmenu" onMouseOver="this.style.background='#30A1DB'" onMouseOut="this.style.background='#0168B3'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a target="I2" href="">Link # in Section #</a></td></tr><tr><td style="cursor: hand" height="18" class="tdmenu" onMouseOver="this.style.background='#30A1DB'" onMouseOut="this.style.background='#0168B3'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a target="I2" href="">Link # in Section #</a></td></tr><tr><td style="cursor: hand" height="20" class="tdmenu" onMouseOver="this.style.background='#30A1DB'" onMouseOut="this.style.background='#0168B3'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a target="I2" href="">Link # in Section #</a></td></tr><tr><td style="cursor: hand" height="20" class="tdmenu" onMouseOver="this.style.background='#30A1DB'" onMouseOut="this.style.background='#0168B3'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">Link # in Section #</a></td></tr></table></div></td></tr><tr><td bgcolor="#294A7B" id="Out3" class="Outline" style="cursor: hand; text-transform: uppercase; font-family: Tahoma; font-size: 10px; color: #E2E2E2; font-weight: bold" height="20">&nbsp;&nbsp; Section #</td></tr><tr><td><div id=Out3details style="display:None; position:relative; left:0;"><table border="1" cellpadding="0" style="border-collapse: collapse" width="100%" bordercolor="#CCFFCC" height="82"><tr><td style="cursor: hand" height="18" class="tdmenu" onMouseOver="this.style.background='#30A1DB'" onMouseOut="this.style.background='#0168B3'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a target="I2" href="">Link # in Section #</a></td></tr><tr><td style="cursor: hand" height="18" class="tdmenu" onMouseOver="this.style.background='#30A1DB'" onMouseOut="this.style.background='#0168B3'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a target="I2" href="">Link # in Section #</a></td></tr><tr><td style="cursor: hand" height="18" class="tdmenu" onMouseOver="this.style.background='#30A1DB'" onMouseOut="this.style.background='#0168B3'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a target="I2" href="">Link # in Section #</a></td></tr><tr><td style="cursor: hand" height="20" class="tdmenu" onMouseOver="this.style.background='#30A1DB'" onMouseOut="this.style.background='#0168B3'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a target="I2" href="">Link # in Section #</a></td></tr><tr><td style="cursor: hand" height="20" class="tdmenu" onMouseOver="this.style.background='#30A1DB'" onMouseOut="this.style.background='#0168B3'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">Link # in Section #</a></td></tr></table></div></td></tr></table></td></table></td></tr></table><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->