Cómo crear un menu desplegable para Web
Debo reconocerlo: Siempre he sido un fan acérrimo de los desarrollos Web. Y como tal, siempre me gusta estar buscando nuevas herramientas y utilidades para añadir a nuevos proyectos. Una de las cosas que más me gusta de cada nuevo desarrollo es la creación de los menús, algo que sin duda forma gran parte de la estructura visual de lo que haremos.
Dentro de los menús, sin duda que los desplegables son de los más funcionales que podamos utilizar. Esto se debe a que nuestros proyectos, ya sean simples sitios Web, Blogs o Sistemas, normalmente cuentan con una serie de secciones, las cuales son más fáciles de acomodar mediante un buen menú desplegable con secciones y sub-secciones.
Para el desarrollo de estos menús existen varias alternativas: Software que construye menús en Flash o DHTML, librerías, frameworks de CSS y más. Hoy en CLH, mediante un sencillo tutorial, les enseñaremos a construir un menú desplegable simple, funcional y atractivo graficamente, con el uso de algunas librerías fáciles de implementar.
El detalle, como siempre, después del salto.
Cómo crear un menú desplegable para Web
Para el desarrollo de este tutorial, nos basaremos en un framework de Javascript, de lado cliente, llamado Ext, el cual presenta una serie de interesantes funcionalidades que esperamos cubrir a fondo en próximos tutoriales.
Así que como siempre, lo primero:
Implementos necesarios:
- Las librerías correspondientes al framework, que pueden descargar desde nuestro sitio Web.
- Un editor Web. CLH utiliza y recomienda Adobe Dreamweaver.
Procedimiento:
1.- Luego de descargar las librerías, procedemos a descomprimirlo en algún lugar de nuestro computador.
2.- Al descomprimir deberíamos tener menu.css, menu.js, examples.css, ext-core.js y ext-core-debug.js además de un directorio con imágenes que utilizaremos.
3.- Con todo eso listo, ahora crearemos un archivo HTML en donde formaremos nuestro menú. Vamos a nuestro editor Web favorito e insertamos el siguiente código:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CLH</title>
/* Llamamos a las hojas de estilo que utilizaremos */
<link href=”examples.css” rel=”stylesheet” />
<link href=”menu.css” rel=”stylesheet” />/* Ahora llamamos a las librerías JS del framework ext3 que utilizaremos en la creación del menú y añadimos el script correspondiente que se encargará de los ‘despliegues’ del menú. */
<script src=”ext-core-debug.js”></script>
<script src=”menu.js”></script><script>
Ext.onReady(function() {
new Ext.ux.Menu(’simple-horizontal-menu’, {
transitionType: ’slide’,
direction: ‘horizontal’, // default
delay: 0.2, // default
autoWidth: true, // default
transitionDuration: 0.3, // default
animate: true, // default
currentClass: ‘current’ // default
});});
</script>
<style>
.ux-menu a.current {
background-image: url(’imagenes/menu-item-bg-current.png’);
border-color: #cbc0b7;
}
</style>
</head><body>
/* Damos un título a nuestro menú y lo conformamos con una lista no ordenada y un listado de ítems. La lista no ordenada referenciará al id ’simple-horizontal-menu’ definido por defecto en las hojas de estilo, el cual se encargará de dar los toques necesarios al menú. Podemos ir reemplazando las secciones y subsecciones según nos acomode */
<h3>Cómo Lo Hago</h3>
<ul id=”simple-horizontal-menu”>
<li>
<a href=”#”>Nosotros</a>
<ul>
<li><a href=”#”>Quienes Somos</a></li>
<li>
<a href=”#”>Historia</a>
<ul>
<li><a href=”#”>Principio</a></li>
<li><a href=”#”>Medio</a></li>
<li><a href=”#”>Final</a></li>
</ul>
</li>
<li><a href=”#”>Créditos</a></li>
</ul>
</li>
<li><a href=”#”>Tutoriales</a></li>
<li>
<a href=”#”>Categorías</a>
<ul>
<li><a href=”#”>Computación</a></li>
<li><a href=”#”>Diseño</a></li>
<li><a href=”#”>Manualidades</a></li>
</ul>
</li>
<li><a href=”#”>Contacto</a></li>
</ul></body>
</html>
4.- Ejecutamos en nuestro navegador favorito y podemos disfrutar de nuestro menú desplegable horizontal.
Algunas notas adicionales:
a) Este menú está basado en un framework llamado ext3, el cual ofrece una serie de funcionalidades, así como modificaciones a este ejemplo. Como todos los ejemplos de diseño Web, partimos enseñando lo más básico pero los incentivamos a indagar más a fondo. En futuros tutoriales iremos viendo otros ejemplos y como hacer desarrollos más personalizados.
b) El estilo del menú es por defecto. Si quieren realizar cambios a los colores o imagenes utilizadas, les recomendamos revisar las hojas de estilo (de extensión CSS) y el directorio imágenes.
Fácil y bonito ¿no?. Como ven, ya no es necesario desgastarse y revisar líneas y líneas de código para disfrutar de un recurso Web útil e impresionante para nuestros visitantes.
Como siempre, recuerden que este tutorial ha sido:
Cualquier duda o comentario, pueden dejarnos unas líneas en el área habilitada a continuación.
Esperamos que este tutorial haya sido de utilidad para Uds.
Muchas gracias por leer y será hasta una próxima oportunidad.
Staff CLH
Tutoriales relacionados:
- Cómo crear una ventana modal en tus sitios Web
- Cómo añadir tooltips a tu Web
- Cómo dominar CSS sin salir del escritorio - Parte 3
- Cómo mejorar tu sitio Web mediante JavaScript
- Cómo optimizar tu sitio Web en 10 pasos
(1 votos, promedio: 5,00 de 5)
Loading ...21 Comentarios a “ Cómo crear un menu desplegable para Web ”
Comenta
Califica este comentario:
Saludos
Realice este ejercicio y no me funciono y al bajar la libreria y descomprimirlo nada mas aparecen 4 archivos y ustedes mencionan a 5 (menu.css, menu.js, examples.css, ext-core.js y ext-core-debug.js)falto este examples.css me parece y realize todo como lo comentan aqui y no lo hiso como debe de ser soy un novato para esto pero me intereza
Bueno esperando la contestaciòn a mi correo
Califica este comentario:
@Alex Garcia: Gracias por avisarnos. Efectivamente nos faltaba un archivo, pero ya lo hemos agregado al RAR para que lo descarguen.
Si quieres puedes subir tu código a algún lado para revisarlo.
Saludos
Califica este comentario:
Saludos
Esteba probando el menu pero creo que no jaló, al igual como dice Alex falta un archivo, ya lo descargue y sigue sin poder estar el archivo.
Les agradezco si podrian subir nuevamente el archivo.
Gracias
Califica este comentario:
Hola, realmente no funciona, en otros tutoriales me han sucedido errores al copiar y pegar… ?? no sale como esta previsto. Si adicionan el archivo html a la carpeta de descarga podríamos revisar mas a fondo y saber si hay realmente algun error por alli.
Gracias.
Califica este comentario:
@Coperfield:
Si estás copiando y pegando te recomiendo revisar las comillas, que normalmente se pegan distinto y eso ocasiona errores.
Saludos.
Califica este comentario:
Claro que si, Juan. Era eso. Al copiar y pegar habían quedado tres tipos diferentes de comillas, mas dos tipos diferentes de comillas sencillas.
Esto se corrige fácil con el “find and replace” del menú edit. -para los que tengan el mismo problema-
Corregido y Funcionando!
Gracias.
Califica este comentario:
@Coperfield: Nos alegramos que te haya servido.
Saludos!
Califica este comentario:
Pregunto:
¿No existe un programa para hacer menus que solo debamos incluir algunas líneas en la página y luego haya otro archivo (por ej. xml o algun otro) que podamos modificarlo y que se modifiquen todas las páginas al “toque”?.
Los menus CSS están geniales pero si cambiamos algo debemos escribir e todas la páginas el cambio, y eso lleva un tiempo enorme.
Probé el CSS Menu Generator Free y está bueno pero hay que escribir como 3000 líneas de código en cada página y convierte una página de 4kb en una de 20kb. Sería bueno este programa sino llenara de código la pagina web
Gracias a todos por iluminarme
josefina
Califica este comentario:
@josefina: Si, de hecho hay un software que automatiza el proceso, permitiendote diseñar el menú y luego incorporar un archivo de extensión .js, se llama AllWebMenus. Sin embargo, por experiencia personal, puedo decirte que la compatibilidad no es 100% con los navegadores, por lo que siempre existe ese riesgo.
Un buen consejo es montar el menu en un archivo unitario separado y después hacer una inclusión con un lenguaje dinámico. Así si quieres modificar solo cambias 1 archivo y no aumenta el tamaño de cada página.
Espero eso te pueda servir.
Saludos
Califica este comentario:
sin lugar a dudas se agradece el aporte de esta pagina. por eso yo quiero colaborar dejando el link de un programa para hecer menus no necesita instalacion.
http://rapidshare.com/files/247916517/Portable_123_Flash_Menu_bohemio1972.zip
Califica este comentario:
oye como puedo descargar adobe dreamweaver
como lo puedo descargar!!!
Califica este comentario:
@mharquito: En la sección implementos necesarios hemos entregado un enlace para descargarlo.
Saludos
Califica este comentario:
Viejo este menu yo lo estoy utilizando en una aplicacion web que estoy haciendo y pues genere una funcion que hace que el menu sea leido desde una base de datos en mysql. todo funciona bien, yo utilizo Ubuntu y lo probe y me quedo super. pero me sorprendi cuando mis compañeros me dijeron que no funciona en Internet Explorer. se crea el estilo y todo pero no me salen los emergente, y miro el codigo fuente y esta perfecto. que tengo que habilitar en IE
Califica este comentario:
@Juan David: Es una situación recurrente. He escuchado de casos (y me ha ocurrido en algunas ocasiones), que el menú presenta algunas incompatibilidades con IE. Esto pueda deberse a que estén usando alguna versión antigua del navegador (como la 6.0) o que tengan deshabilitado Javascript.
Te recomiendo probar con eso.
Saludos
Califica este comentario:
excelente los codigos pero necesitoes un manu en la barra de inicio de la parte de arriba enla principao gl
peroeste me servio gracias d etodas maneras
espero resivir una instrucci prononto ya uq ees urgente
Califica este comentario:
El enalace de los archivos necesarios ya no funciona sera que lo podrian arregla ?
Califica este comentario:
Estimados,
Primero quiero felicitarlos por su página web, muy útil en varios ámbitos y también dar gracias al profe Carlos Beyzaga por haberme dado este link.
Al grano, estaba viendo los links de ejemplos y del menu.rar y ya no esisten, podrá haber alguna forma que vuelvan a agergar estos links. En el link de creación de un slideshow pasa lo mismo para el enlace de ejemplo.
Muchas Gracias
Crisitán Pacheco
Facultad de Ciencias de la Ingeniería
Universidad Central
La Serena
Califica este comentario:
@Cristián Pacheco: Gracias por tus comentarios y la buena onda. Hace poco tiempo movimos el sitio a un nuevo servidor y faltaron algunos descargables de ciertos tutoriales que hemos estado reponiendo, así que los tendremos disponibles a la brevedad.
Saludos!
Califica este comentario:
Que tal.
Necesito que me echen la mano con lo siguiente; He visto algunas paginas web que emplean un menu con iconos que al deslizar el puntero se agrandan (el icono por donde pasa el puntero) tal como si se tratara el menu flotante de MAC (y algunas barras para Windows) y me gustaria implementar un menu como ese pero para mi pagina Web pero no se donde dar con el.
De antemano muchas gracias.
Califica este comentario:
muchachos el link sigue sin funcionar….
saludos.
Califica este comentario:
@Montx: Lamentablemente hasta la fecha no habíamos podido encontrar el archivo original, ya que el sitio donde estaba alojado inicialmente desapareció. Sin embargo, uno de los usuarios que lo alcanzó a descargar lo envío al equipo, así que ya hemos podido reestablecer el enlace y se encuentra disponible en el mismo artículo.
Saludos!