Blog and Web

Menú desplegable con Javascript

Usando el script creado por dhtmlgoodies.com crearemos un menú desplegable funcional y fácil de configurar siguiendo los siguientes pasos:

  1. Entre las etiquetas <head> y </head> colocamos los siguientes estilos de nuestro menú o bien con una hoja de estilos externa .css
    
    <style type="text/css">
    
    /* Estilos de configuración del menú desplegable.*/
    
    #dhtmlgoodies_menu ul li ul{
    display:none; /* Necesario para visualizarse bien en opera */
    }
    
    #dhtmlgoodies_menu{
    visibility:hidden;
    }
    #dhtmlgoodies_menu ul{
    margin:0px; /* Sin sangria */
    padding:0px; /* Sin sangria */
    }
    #dhtmlgoodies_menu li{
    list-style-type:none; /* Sin iconos */
    }
    #dhtmlgoodies_menu a{
    margin:0px;
    padding:0px;
    }
    
    /* Estilos de la estética del menú. Aquí puedes modificarlos de acuerdo al estilo de tu web
       Estilos que se aplican a todo el menú*/
    
    #dhtmlgoodies_menu ul{
    border:1px solid #000;
    background-color:#FFF;
    padding:1px;
    }
    #dhtmlgoodies_menu ul.menuBlock1{ /* Barra de menú - elementos del menu principal*/
    border:0px;
    padding:1px;
    border:1px solid #317082;
    background-color:#E2EBED;
    overflow:visible;
    }
    #dhtmlgoodies_menu ul.menuBlock2{ /* Barra de menú - elementos del menu principal*/
    border:0px;
    padding:1px;
    border:1px solid #555;
    }
    #dhtmlgoodies_menu a{
    color: #000;
    text-decoration:none;
    padding-left:2px;
    padding-right:2px;
    }
    
    /* Estilos del menú principal. El que esta siempre visible */
    
    #dhtmlgoodies_menu .currentDepth1{
    padding-left:5px;
    padding-right:5px;
    border:1px solid #E2EBED;
    }
    #dhtmlgoodies_menu .currentDepth1over{
    padding-left:5px;
    padding-right:5px;
    background-color:#317082;
    border:1px solid #000;
    }
    #dhtmlgoodies_menu .currentDepth1 a{
    font-weight:bold;
    }
    #dhtmlgoodies_menu .currentDepth1over a{
    color:#FFF;
    font-weight:bold;
    }
    
    /* Estilos submenu nivel 1 */
    
    #dhtmlgoodies_menu .currentDepth2{
    padding-right:2px;
    border:1px solid #FFF;
    }
    #dhtmlgoodies_menu .currentDepth2over{
    padding-right:2px;
    background-color:#E2EBED;
    border:1px solid #000;
    }
    #dhtmlgoodies_menu .currentDepth2over a{
    color:#000;
    } 
    
    /* Estilos submenu nivel  2 */
    
    #dhtmlgoodies_menu .currentDepth3{
    padding-right:2px;
    border:1px solid #FFF;
    }
    #dhtmlgoodies_menu .currentDepth3over{
    padding-right:2px;
    background-color:#EDE3EB;
    border:1px solid #000;
    }
    
    /* Estilos submenu nivel 3 */
    
    #dhtmlgoodies_menu .currentDepth4{
    padding-right:2px;
    border:1px solid #FFF;
    }
    #dhtmlgoodies_menu .currentDepth4over{
    padding-right:2px;
    background-color:#EBEDE3;
    border:1px solid #000;
    } 
    
    </style>
    
  2. Para el script igualmente podemos colocarlo entre las etiquetas <head> y </head> o en un archivo .js externo. El script es el siguiente:
    
     <script type="text/javascript">
    
      /******************************************
      (C) www.dhtmlgoodies.com, October 2005
    
      Update log:
      Version 1.1  December, 1st 2005: Critical update for the new Firefox 1.5 browser
      Version 1.2:  December, 21th 2005 : Mouseover effect when mouse moves outside of a submenu items text
    
      This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. 
    
      Terms of use:
      You are free to use this script as long as the copyright message is kept intact. However, you may not
      redistribute, sell or repost it without our permission.
    
      Thank you!
    
      www.dhtmlgoodies.com
      Alf Magne Kalleland
    
      ****************************************/
    
      var dhtmlgoodies_menuObj; // Referencía al div del menú
      var currentZIndex = 1000;
      var liIndex = 0;
      var visibleMenus = new Array();
      var activeMenuItem = false;
      var timeBeforeAutoHide = 1200; // Cantidad de microsegundos antes de que los menús se oculten automaticamente
      var dhtmlgoodies_menu_arrow = 'images/arrow.gif'; //Imagen de flecha hacia abajo 
    
      var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
      var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9].[0-9]).*/g,'$1')/1;
      var menuBlockArray = new Array();
      var menuParentOffsetLeft = false;
      function getTopPos(inputObj)
      {
    
      var returnValue = inputObj.offsetTop;
      if(inputObj.tagName=='LI' && inputObj.parentNode.className=='menuBlock1'){
      var aTag = inputObj.getElementsByTagName('A')[0];
      if(aTag)returnValue += aTag.parentNode.offsetHeight;
     }
      while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
     return returnValue;
      }
    
      function getLeftPos(inputObj)
      {
      var returnValue = inputObj.offsetLeft;
      while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
      return returnValue;
      }
    
      function showHideSub()
      {
     var attr = this.parentNode.getAttribute('currentDepth');
      if(navigator.userAgent.indexOf('Opera')>=0){
      attr = this.parentNode.currentDepth;
      }
    
      this.className = 'currentDepth' + attr + 'over';
    
      if(activeMenuItem && activeMenuItem!=this){
      activeMenuItem.className=activeMenuItem.className.replace(/over/,'');
      }
      activeMenuItem = this;
    
      var numericIdThis = this.id.replace(/[^0-9]/g,'');
      var exceptionArray = new Array();
      // Mostrar subitem LI
      var sub = document.getElementById('subOf' + numericIdThis);
      if(sub){
      visibleMenus.push(sub);
      sub.style.display='';
      sub.parentNode.className = sub.parentNode.className + 'over';
      exceptionArray[sub.id] = true;
      } 
    
      // Showing parent items of this one
    
      var parent = this.parentNode;
      while(parent && parent.id && parent.tagName=='UL'){
      visibleMenus.push(parent);
      exceptionArray[parent.id] = true;
      parent.style.display='';
    
      var li = document.getElementById('dhtmlgoodies_listItem' + parent.id.replace(/[^0-9]/g,''));
      if(li.className.indexOf('over')<0)li.className = li.className + 'over';
      parent = li.parentNode;
    
      }
    
      hideMenuItems(exceptionArray);
    }
     function hideMenuItems(exceptionArray)
      {
      /*
      Ocultar el menú visible en ese momento
      */
      var newVisibleMenuArray = new Array();
      for(var no=0;no<visibleMenus.length;no++){
      if(visibleMenus[no].className!='menuBlock1' && visibleMenus[no].id){
      if(!exceptionArray[visibleMenus[no].id]){
      var el = visibleMenus[no].getElementsByTagName('A')[0];
      visibleMenus[no].style.display = 'none';
      var li = document.getElementById('dhtmlgoodies_listItem' + visibleMenus[no].id.replace(/[^0-9]/g,''));
      if(li.className.indexOf('over')>0)li.className = li.className.replace(/over/,'');
      }else{
      newVisibleMenuArray.push(visibleMenus[no]);
      }
      }
      }
      visibleMenus = newVisibleMenuArray;
      }
    
      var menuActive = true;
      var hideTimer = 0;
      function mouseOverMenu()
      {
      menuActive = true;
      }
    
      function mouseOutMenu()
      {
      menuActive = false;
      timerAutoHide();
      }
    
      function timerAutoHide()
      {
      if(menuActive){
      hideTimer = 0;
      return;
      }
    
      if(hideTimer<timeBeforeAutoHide){
      hideTimer+=100;
      setTimeout('timerAutoHide()',99);
      }else{
      hideTimer = 0;
      autohideMenuItems();
      }
      }
    
      function autohideMenuItems()
      {
      if(!menuActive){
      hideMenuItems(new Array());
      if(activeMenuItem)activeMenuItem.className=
    activeMenuItem.className.replace(/over/,'');
      }
      }
    
      function initSubMenus(inputObj,initOffsetLeft,currentDepth)
      {
      var subUl = inputObj.getElementsByTagName('UL');
      if(subUl.length>0){
      var ul = subUl[0];
    
      ul.id = 'subOf' + inputObj.id.replace(/[^0-9]/g,'');
      ul.setAttribute('currentDepth' ,currentDepth);
      ul.currentDepth = currentDepth;
      ul.className='menuBlock' + currentDepth;
      ul.onmouseover = mouseOverMenu;
      ul.onmouseout = mouseOutMenu;
      currentZIndex+=1;
      ul.style.zIndex = currentZIndex;
      menuBlockArray.push(ul);
      var topPos = getTopPos(inputObj);
      var leftPos = getLeftPos(inputObj)/1 + initOffsetLeft/1;
      ul = dhtmlgoodies_menuObj.appendChild(ul);
      ul.style.position = 'absolute';
      ul.style.left = leftPos + 'px';
      ul.style.top = topPos + 'px';
      var li = ul.getElementsByTagName('LI')[0];
     while(li){
      if(li.tagName=='LI'){
      li.className='currentDepth' + currentDepth;
      li.id = 'dhtmlgoodies_listItem' + liIndex;
      liIndex++;
      var uls = li.getElementsByTagName('UL');
      li.onmouseover = showHideSub;
     if(uls.length>0){
      var offsetToFunction = li.getElementsByTagName('A')[0].offsetWidth+2;
      if(navigatorVersion<6 && MSIE)offsetToFunction+=15; // MSIE 5.x fix
      initSubMenus(li,offsetToFunction,(currentDepth+1));
      }
      if(MSIE){
      var a = li.getElementsByTagName('A')[0];
      a.style.width=li.offsetWidth+'px';
      a.style.display='block';
      }
      }
      li = li.nextSibling;
      }
      ul.style.display = 'none';
      if(!document.all){
      //dhtmlgoodies_menuObj.appendChild(ul);
      }
      }
      }
    
     function resizeMenu()
      {
      var offsetParent = getLeftPos(dhtmlgoodies_menuObj);
    
      for(var no=0;no<menuBlockArray.length;no++){
      var leftPos = menuBlockArray[no].style.left.replace('px','')/1;
      menuBlockArray[no].style.left = leftPos + offsetParent - menuParentOffsetLeft + 'px';
      }
      menuParentOffsetLeft = offsetParent;
      }
    
      /*
      Inicialización del menú
      */
      function initDhtmlGoodiesMenu()
      {
      dhtmlgoodies_menuObj = document.getElementById('dhtmlgoodies_menu');
    
      var aTags = dhtmlgoodies_menuObj.getElementsByTagName('A');
      for(var no=0;no<aTags.length;no++){
     var subUl = aTags[no].parentNode.getElementsByTagName('UL');
      if(subUl.length>0 && aTags[no].parentNode.parentNode.parentNode.id != 'dhtmlgoodies_menu'){
      var img = document.createElement('IMG');
      img.src = dhtmlgoodies_menu_arrow;
      aTags[no].appendChild(img);
     }
     }
    
      var mainMenu = dhtmlgoodies_menuObj.getElementsByTagName('UL')[0];
      mainMenu.className='menuBlock1';
      mainMenu.style.zIndex = currentZIndex;
      mainMenu.setAttribute('currentDepth' ,1);
      mainMenu.currentDepth = '1';
      mainMenu.onmouseover = mouseOverMenu;
      mainMenu.onmouseout = mouseOutMenu;
     var mainMenuItemsArray = new Array();
      var mainMenuItem = mainMenu.getElementsByTagName('LI')[0];
      mainMenu.style.height = mainMenuItem.offsetHeight + 2 + 'px';
      while(mainMenuItem){
    
      mainMenuItem.className='currentDepth1';
      mainMenuItem.id = 'dhtmlgoodies_listItem' + liIndex;
      mainMenuItem.onmouseover = showHideSub;
      liIndex++;
      if(mainMenuItem.tagName=='LI'){
      mainMenuItem.style.cssText = 'float:left;';
      mainMenuItem.style.styleFloat = 'left';
      mainMenuItemsArray[mainMenuItemsArray.length] = mainMenuItem;
      initSubMenus(mainMenuItem,0,2);
      } 
    
      mainMenuItem = mainMenuItem.nextSibling;
    
      }
     for(var no=0;no<mainMenuItemsArray.length;no++){
      initSubMenus(mainMenuItemsArray[no],0,2);
      }
    
      menuParentOffsetLeft = getLeftPos(dhtmlgoodies_menuObj);
      window.onresize = resizeMenu;
      dhtmlgoodies_menuObj.style.visibility = 'visible';
      }
    
      window.onload = initDhtmlGoodiesMenu;
      </script>
    
  3. Para aplicar este sccript solo tenemos crear listas dentro de un div llamado “dhtmlgoodies_menu” como sigue:
    
    <!-- Como ejemplo crearemos un script con algunas categorias de Blogyweb.blogspot.com --> 
    
    <div id="dhtmlgoodies_menu">
    <ul>
    
    <!-- Creamos la primer pestaña del menú: Blogger --> 
    
    <!-- Metemos la primera opción -->
      <li><a href="http://www.dhtmlgoodies.com/search/label/Blogger/">Blogger</a>
      <ul>
    <!--Ahora un submenu nivel 1 para Blogger con un par de opciones -->
      <li><a href="http://www.blogyweb.blogspot.com/search/label/Blogger/">Nuevo Blogger </a></li>
      <li><a href="http://www.blogyweb.blogspot.com/search/label/Blogger/">Blogger Beta </a>
      <ul>
    <!-- Ponemos un submenu nivel 2 para Blogger Beta -->
      <li><a href="http://www.blogyweb.blogspot.com/search/label/Blogger/"> Trucos</a></li>
      <li><a href="http://www.blogyweb.blogspot.com/search/label/Blogger/"> Scripts</a></li>
      <li><a href="http://www.blogyweb.blogspot.com/search/label/Blogger/"> Plantillas</a></li>
      </ul>
      </li>
      </ul>
      </li>
    
    <!-- Ponemos una segunda pestaña en el menú con la opción Javascript por ejemplo--> 
    
      <li><a href="http://www.blogyweb.blogspot.com/search/label/Javascript/"> Trucos</a>
      <ul>
    <!-- Ponemos un submenú nivel 1 para la opción trucos con 1 opción-->
      <li><a href="http://www.blogyweb.blogspot.com/search/label/Javascript/"> Hacks</a></li>
      <li><a href="http://www.blogyweb.blogspot.com/search/label/Javascript/"> Códigos</a>
    <!-- Ponemos un submenú nivel 2 para la opción códigos -->
      <ul>
      <li><a href="http://www.blogyweb.blogspot.com/search/label/Javascript/"> Texto</a></li>
      <li><a href="http://www.blogyweb.blogspot.com/search/label/Javascript/"> JS</a></li>
      </ul>
      </li>
      </ul>
    
    <!-- Y por último una pestaña con la opción Photoshop con sólo una opción--> 
    
      <li><a href="http://www.blogyweb.blogspot.com/search/label/Photoshop/"> Tutoriales</a>
    <!-- Ponemos una submenú nivel 1 para esta opcion Tutoriales-->
    <ul>
      <li><a href="http://www.blogyweb.blogspot.com/search/label/Photoshop"> Imagenes</a></li>
      <li><a href="http://www.blogyweb.blogspot.com/search/label/Photoshop"> Fotografías</a></li>
      </ul>
      </li>
    
    </ul>
    </div>
    

    Lo que nos da como resultado algo como lo que se muestra en la siguiente imagen:

Como puedes ver es mucho código, pero no tanto trabajo para implementarlo, para que puedas comprenderlo mejor te dejamos el ejemplo para que lo descargues y los pruebes.

Descargar el ejemplo.