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:48:53 am
@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!
3:34:12 pm
estimados…el ejemplo esta excelente…
pero cambienle el charset de utf-8 a ISO-8859-1
para que aparescan bien los acentos…
saludos…
3:36:06 pm
ISO-8859-1 cambiar el charset porfavor…
1:31:57 am
hola, que tal?..probe de hacer el manu desplegable pero no funciona. puse los archivos que baje en una carpeta de mi pagina, luego tire en la misma caprpeta el index.html con el codigo,..pero no funciona igual…nose porque el html no levanta los archivos .js ni nada…
gracias igual de todas formas.
7:20:38 pm
Las hojas de estilo no concuerdan con el html..el estilo id:”simple-horizontal-menu” no existe en ninguna hoja de estilo…
7:23:33 pm
@gonzalo el archivo html no levanta las ojas de estilo ni los js porque esta mal escrito en el ejemplo..
ponelos asi:
igualmente como dije antes los estilos no corresponden
9:44:03 am
[…] Fuente: comolohago.cl […]
9:47:13 am
Espectacular articulo!! muy bueno!!
Un saludo y sigue asi 😀
10:34:12 am
gran articulo si señor!!! sigue asi! 😀
8:26:24 pm
Buenas noches.. Hice todo el procedimiento y logre crear mi menú.
Ahora necesito que por favor me diga como puedo crear otro Sub-Menu Nosotros / Historia / Final Debajo de final.
Muchas gracias