Demo Dynamic HTML - Menú en cascada en VBscript

Menú en cascada en VBscript

Compatibilidad: Ms Internet Explorer

Esta demo funciona exclusivamente con MSIE y permite crear de manera extremadamente sencilla un menú en cascada del tipo de los de Windows. Muy simple su impostación y personalización.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<STYLE TYPE="text/css">
         /* Make the menu float to the left of the text. */
         #menu {float:left; width:50pt; background:lightgrey;
            border:2px white outset; cursor:default} 
         /* Hide the pop-up menus initially. */
         #menu .popup {position:absolute; display:none;
            background:lightgrey; border:2px white outset;
            width:135pt; margin:2pt}
         #menu P {margin-top:0pt; margin-bottom:0pt}
         .over {color:navy; font-weight:bold}
      </STYLE>
      <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() {
            var el = event.srcElement;
            clearCurrent();
            // Display a new menu option.
            if (("P" == el.tagName) &&
                  ("menu" == el.parentElement.id)) {
               // Position and display the pop-up menu.
               var elpop = document.all[el.sourceIndex + 1];
               elpop.style.pixelLeft = document.all.menu.offsetLeft +
                  document.all.menu.offsetWidth - 7;
               elpop.style.pixelTop  = el.offsetTop +
                  document.all.menu.offsetTop;
               elpop.style.display = "block";
               curPop = elpop;
            }
            event.cancelBubble = true;
         }

function highlight() {
            // Highlight the menu options.
            if (null != event.fromElement)
               if ((event.fromElement.tagName == "P") &&
                     (event.fromElement.parentElement.id == "menu"))
                  event.fromElement.className = "";
            if (null != event.toElement)
               if ((event.toElement.tagName == "P") &&
                     (event.toElement.parentElement.id == "menu"))
                  event.toElement.className = "over";
         }
      </SCRIPT>

</HEAD>

<DIV ID="menu" ONCLICK="popup()" ONMOUSEOVER="highlight()"
            ONMOUSEOUT="highlight()">
         <P>HTML
            <DIV CLASS="popup">
               <P><A HREF="http://www.htmlpoint.com">Índice</A>
               <P><A HREF="http://www.htmlpoint.com">Gif</A>
               <P><A HREF="http://www.htmlpoint.com">JavaScript</A>
               <P><A HREF="http://www.htmlpoint.com">Fondos</A>
               <P><A HREF="http://www.htmlpoint.com">Controles</A>
       </DIV>          
         <P>Altri
            <DIV CLASS="popup">
               <P><A HREF="http://www.microsoft.com">Microsoft</A>
               <P><A HREF="http://inews.tecnet.it">Internet News</A>
               
            </DIV>

</div>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]