English Português

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.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. albert / Hace 10 años /

      Ahora esta mas claro.

      si debajo de esta linea : img.src = dhtmlgoodies_menu_arrow;
      añadimos: img.border = ‘0′;
      eliminamos el borde de color azul que apareze en IE.

      Albert

      Responder a albert →
    2. Francisco / Hace 10 años /

      Tienes razón albert, aunque es más sencillo definir eso en el código CSS (paso 1).

      Responder a Francisco →
    3. ´Quenya / Hace 10 años /

      bueno yo pongo todo el codigo seguido pero al compilar me da esto
      “Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida. Información: 1” es el nuevo blogger

      Responder a ´Quenya →
    4. Tiens / Hace 10 años /

      Gracias por el Menu, pero no puedo colocarlo por mas q intento de todos los modos posibles, me sale el error The element type “Title” must be terminated by the matching end-tag “”.
      Y si borro esa linea de comentario Menu… ya no sale ese error pero sale este: The entity name must immediately follow the ‘&’ in the entity reference. Este error sale al colocar los dos primeros codigos (sin colocar todavia el tercer codigo: el ultimo script), he probado a colocarlos inmediatamente despues de tambien inmediatamente antes de pero nada. Una ayudita please.

      Responder a Tiens →
    5. Tiens / Hace 10 años /

      el editor me ha borrado algunas tags q habia escrito literalmente: Donde dice:…comentario Menu… debe decir: Title Menu…. Title.
      Donde dice: …inmediatamente despues de tambien… debe decir: inmediatamente despues de head…

      Responder a Tiens →
    6. raulxiempre / Hace 10 años /

      y para realizar un menu desplegable pero verticalmente
      como lo hago?

      que no se despleguen hacia la derecha o izquierda sino para abajo y desplace el siguiente item mas abajo, si alguien puede ayudarme escribir por fa a raulxiempre@hotmail.com

      Responder a raulxiempre →
    7. Darka Treake / Hace 9 años /

      Hola!!

      Por fin he conseguido un lugar para poner menús desplegables!!
      la información que presentais es valiosa, y me está siendo muy útil!! Gracias!!

      Pero quería preguntaros, cómo puedo modificar el tamaño de los desplegables?
      Porque los títulos aparecen pequeños, es decir, el título no ocupa una linea (el desplegable no se alarga hasta que el título termina), sino que el título ocupa varias lineas porque el desplegable es de un pulgar de ancho, más o menos.

      He conseguido cambiar el fondo, etc, pero eso no sé cómo cambiarlo.
      Sería de gran ayuda poder hacerlo.
      Muchas gracias!!
      Darka.

      Responder a Darka Treake →
    8. PICCORO / Hace 9 años /

      he encontrado la forma de hacer cambios sin que ningun blog de problemas, solo deben comentar el javascripts, y listo, podran cambir4 el fondo, css, tags, y agregar caracteres extranos..

      este error es comun, ya que si se programa en guindos nunca se cuida separar el javascript del html, por ello dentro de los tags deben comentar, asi exploradores y parseadores xml (los correctores de codigo de los blogs) no detectaran los cambios..

      Responder a PICCORO →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad