CSS

Ξ 31 comentarios

Cómo crear un menu desplegable para Web

por Xabadu
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:

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

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

31 Comentarios

  • oye como puedo descargar adobe dreamweaver
    como lo puedo descargar!!!

  • @mharquito: En la sección implementos necesarios hemos entregado un enlace para descargarlo.

    Saludos

  • 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

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

  • 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

  • El enalace de los archivos necesarios ya no funciona sera que lo podrian arregla ?

  • 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

  • @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!

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

  • muchachos el link sigue sin funcionar….
    saludos.

1 2 3 4

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gente linda que nos quiere

Donde mas estamos