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.
2:35:49 pm
oye como puedo descargar adobe dreamweaver
como lo puedo descargar!!!
4:56:58 pm
@mharquito: En la sección implementos necesarios hemos entregado un enlace para descargarlo.
Saludos
3:44:13 pm
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
10:14:46 am
@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
12:52:19 am
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
10:19:30 am
El enalace de los archivos necesarios ya no funciona sera que lo podrian arregla ?
11:25:47 am
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
6:44:37 pm
@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!
10:54:48 pm
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.
8:07:54 am
muchachos el link sigue sin funcionar….
saludos.