Menú desplegable con Javascript

Marzo 7th, 2007 | Publicado por Francisco en Javascript | 8 Comentarios

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

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>

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>

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.

albert:

Agosto 10th, 2007 a las 3:24 am (#)

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

Francisco:

Agosto 12th, 2007 a las 7:06 pm (#)

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

´Quenya:

Septiembre 27th, 2007 a las 7:24 pm (#)

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

Tiens:

Enero 6th, 2008 a las 7:00 pm (#)

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.

Enero 6th, 2008 a las 7:12 pm (#)

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…

raulxiempre:

Marzo 25th, 2008 a las 9:36 am (#)

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

Darka Treake:

Abril 24th, 2008 a las 12:07 pm (#)

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.

PICCORO:

Mayo 15th, 2008 a las 11:54 am (#)

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

Blog and Web

Menú desplegable con Javascript

Artículos relacionados

Respuestas

Categorías

Patrocinadores

Blogroll

Entradas Recientes

Comentarios Recientes

Archivos