Tecnología

Código en HTML para un menú desplegable vertical

Escrito por warren davies | Traducido por luisa santana
Código en HTML para un menú desplegable vertical

Con un poco de código HTML, puedes agregar un menú desplegable a tu sitio.

Comstock/Comstock/Getty Images

Puedes guardar espacio en tu sitio web usando menús desplegables. Éstos contienen una lista de opciones "padres" y cuando el usuario pasa el ratón sobre el objeto, todos los "hijos" aparecen en la página. Este tipo de menú puede hacerse con un solo archivo de HTML, o como parte del manejo de contenido del sistema añadiendo código CSS a la hoja de estilo principal en CSS.

Otras personas están leyendo

Creando la hoja de estilo

Si quieres que el menú vaya en un archivo autónomo de HTML, debes hacer un espacio entre las etiquetas <head> y </head> en donde irá el código CSS. Escribe lo siguiente en tu archivo. <style type="text/css"> </style> El espacio entre estas dos etiquetas es tu hoja de estilo. Si estás usando un archivo CSS separado, añade lo siguiente en algún lugar entre las etiquetas de "head": <LINK href="style.css" rel="stylesheet" type="text/css"> Luego crea un archivo llamado "style.css", que será tu hoja de estilo. Mantén la hoja de estilo en el mismo directorio que el archivo principal de HTML.

Creando el menú

Debes crear una etiqueta que contenga <div> para que el menú vaya dentro de ellas. Agrega lo siguiente a tu página de HTML en la ubicación en que quieres que vaya el menú: <div id=menu> </div> Luego debes definir el divisor del menú. Añade el siguiente código a tu hoja de estilo: #menu { width: 200px; } Añade a esta entrada cualquier otro estilo CSS que desees que el divisor tenga; por ejemplo, un color de fondo, bordes, o un tamaño diferente.

Marcado HTML

Añade el código para el menú. El menú usará una lista desordenada: <ul>. Añade el siguiente código entre las etiquetas <div> para tu menú. <ul> <li>Elemento 1 del menú <ul> <li><a href="#">Elemento 1 sub-menú</a></li> <li><a href="#">Elemento 2 sub-menú</a></li> </ul> </li> </ul> Nota que las etiquetas <ul> de los sub-menús están entre las etiquetas <li> y </li> para "Elemento 1 del menú". Esto le dice al buscador que el sub-menú está contenido debajo de ese elemento del menú. Adapta el código de arriba para representar tu propio menú, añadiendo tus propios URL y sub-menús adicionales si es necesario

Estilo CSS

En este punto, el menú aparecerá pero el sub-menú se mostrará siempre. Sólo necesitas usar el atributo "display" para esconder y revelar el sub-menú. Añade lo siguiente a tu hoja de estilo: #menu li {position: relative;} #menu ul ul { position: absolute; top: 0; left: 100%; width: 100px; } div#menu ul ul {display: none;} div#menu ul li:hover ul {display: block;} Guarda todos los archivos. Tu menú desplegable está listo.

No dejes de leer...

comentarios

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media