»
EnglishFrenchVietnamese

Print - Multi Level Pull Down Menu - JavaScriptBank.com

Full version: jsB@nk » Menu » Multilevel menu » Multi Level Pull Down Menu
URL: https://www.javascriptbank.com/multi-level-pull-down-menu.html

Multi Level Pull Down Menu © JavaScriptBank.comThis JavaScript allows you to associate a dynamic JavaScript menu with regular links on your page. As the mouse moves over the JavaScript link in menu, a JavaScript menu pops up containing "sub links".

Full version: jsB@nk » Menu » Multilevel menu » Multi Level Pull Down Menu
URL: https://www.javascriptbank.com/multi-level-pull-down-menu.html



CSS
<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-->


JavaScript
<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-->


HTML
<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-->