Cómo crear un menu desplegable para Web con css y javascript by comolohago.cl

por coudlain, posted in css

Fuente: comolohago.cl

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:

  1. Las librerías correspondientes al framework, que pueden descargar desde nuestro sitio Web.
  2. 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.jsademá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>

<link href=”examples.css” rel=”stylesheet” />
<link href=”menu.css” rel=”stylesheet” />

<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>

<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.

Deja un comentario