CSS Javascript
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.
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:
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.
9:59:26 am
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
9:34:14 pm
@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
7:45:15 pm
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
9:12:14 pm
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.
10:11:53 am
@Coperfield:
Si estás copiando y pegando te recomiendo revisar las comillas, que normalmente se pegan distinto y eso ocasiona errores.
Saludos.
1:31:11 am
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.
9:12:10 am
@Coperfield: Nos alegramos que te haya servido.
Saludos!
10:58:24 am
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
12:58:45 pm
@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
3:36:49 am
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