Uno de los problemas mas comunes para un desarrollador es el crear una barra de menú, existen muchas formas, algunas con Javascript, otras no son compatibles con todos los navegadores y otras muy engorrosas de implementar. Esta vez les presento una forma elegante y sencilla de implementar un menú utilizando CSS.
El ejemplo original fue desarrollado en A List Apart en Suckerfish Dropdowns y modificado en cssMenus el cual nos ha dejado los archivos listos para utilizarlos.
Obteniendo los archivos
Este menú esta implementado en base a CSS y un pequeño Javascript que es hacerlo compatible con versiones inferiores de Internet Explorer. Para ello descargamos los archivos nav-h.js, nav-v.js, nav-h.css y nav-v.css desde http://qrayg.com/experiment/cssmenus/.
Creando la estructura del Menú
Lo primero es crear la estructura de nuestro menú, para ello haremos uso de listas, entonces por cada nivel de menú que deseamos crearemos una lista, de la siguiente forma:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Archivos</a></li>
<li><a href="#">Categorias</a>
<ul>
<li><a href="#">ActionScript</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
</ul>
</li>
<li><a href="#">Foro</a></li>
<li><a href="#">Contactenos</a></li>
</ul>
Menú Horizontal
Lo primero es adjuntar la hoja de estilos nav-h.css, el segundo paso es adjuntar el Javascript nav-h.js pero como solo se necesita que funcione con versiones antiguas de Internet Explorer le agregamos un condicional para que cargue. Finalmente a la lista principal le asignamos el id navmenu-h.
<html>
<head>
<title>Menu CSS - unijimpe</title>
<link rel="stylesheet" type="text/css" href="nav-h.css" />
<!--[if gte IE 5.5]>
<script type="text/javascript" src="nav-h.js"></script>
<![endif]-->
</head>
<body>
<ul id="navmenu-h">
<li><a href="#">Home</a></li>
<li><a href="#">Archivos</a></li>
<li><a href="#">Categorias</a>
<ul>
<li><a href="#">ActionScript</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
</ul>
</li>
<li><a href="#">Foro</a></li>
<li><a href="#">Contactenos</a></li>
</ul>
</body>
</html>
Con lo cual obtenemos el resultado mostrado en: menucss-h.html.
Menú Vertical
En el caso del menú verticalse adjunta la hoja de estilos nav-v.css, luego se adjunta el Javascript nav-v.js y finalmente a la lista principal le asignamos el id navmenu-v.
<html>
<head>
<title>Menu CSS - unijimpe</title>
<link rel="stylesheet" type="text/css" href="nav-v.css" />
<!--[if gte IE 5.5]>
<script type="text/javascript" src="nav-v.js"></script>
<![endif]-->
</head>
<body>
<ul id="navmenu-v">
<li><a href="#">Home</a></li>
<li><a href="#">Archivos</a></li>
<li><a href="#">Categorias</a>
<ul>
<li><a href="#">ActionScript</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
</ul>
</li>
<li><a href="#">Foro</a></li>
<li><a href="#">Contactenos</a></li>
</ul>
</body>
</html>
Con lo cual obtenemos el resultado mostrado en: menucss-v.html.
Solo quedaría como paso final modificar la hoja de estilos y seleccionar la tipografía, color, margenes y bordes que se adecuen a nuestro diseño.
Comentarios Total 17 comentarios
Publicado: 19/02/2008 3:15 am
[…] UNIJIMPE, uno de los problemas mas comunes para un desarrollador, es el crear una barra de menú, pues […]
Publicado: 19/02/2008 5:56 am
Excelente recurso!!!
Verdaderamente útil y además cross-browser
Sin dudas, a mi parecer, creo que es la manera más sencilla de implementar menús para aplicaciones webs sin tener que poner tanto código javascript, y además para aquellos desarrollos que toman los datos desde una base de datos.
Gracias
Saludos.-
Publicado: 04/03/2008 11:12 pm
La verdad que no puedo implementarlo con mysql. No funciona en IE, no hay caso…
Igualmente seguiré probando y viendo alternativas.
Saludos.-
Publicado: 19/04/2008 5:50 pm
[…] ! necesito con urgencia un menu indexable ! , con la mirada puesta en ti ,lo […]
Publicado: 23/04/2008 3:31 am
Lo primero es darte las gracias por compartir estos recursos tan valiosos para gente como yo que no domina css, lo segundo es que no me funciona en ie6 como yo quisiera, si miras en esta url http://www.plazaredes.com/clients/graham/index.html en ie6 los submenus aparecen con tamaño desigual, sin embargo en ie7 mozilla etc funciona perfectamente, he probado millones de cosas pero todas sin exito.A ver si tu o alguien me puede echar un cable
Publicado: 06/08/2008 10:09 am
Lo primeo darte las gracias, muy util…
No soy muy bueno en CSS, como seria si en vez de se utilizara:
…
…
Publicado: 06/08/2008 10:14 am
Cambiar:
por:
Publicado: 22/09/2008 12:23 pm
Estupendo sistema, a mi me ha funcionado perfectamente, y eso que lo ligue con php, sinceramente impresionante. Lo único que cuando choca con un documento flash el menu se queda por detrás, y esto me trae rota la cabeza, si se os ocurre algo web@climacity.com.
Un saludo,
Sergio
Publicado: 22/09/2008 8:28 pm
Para arreglar este problema, debes agregarle al flash la propiedad wmode con el valor de transparent, de la forma tradicional debes agregar:
< param name="wmode" value="transparent" >Si utilizas SWFObject debes agregar:
so.addParam("wmode", "transparent");Publicado: 28/10/2008 3:00 pm
por alguna razon en IE no me funciona, el menu se queda detras.
HELP!!!
fijense en el desplegable de Galerias.
http://www.hectdesign.com/test/galerias/01retratos/galeria_01.html
Publicado: 25/11/2008 11:11 am
Como hago para que sea como un acordeón, abriendo hacia abajo corriendo las opciones y no como en este caso (vertical), que desplega hacia los lados
Publicado: 23/02/2009 10:24 am
Hola el codigo esta buenisimo aunque tengo un problema y es que me pasa por detras de un FLASH.
Con IE lo solucione como bien dijiste con pero con Mozilla todavia sigue igual.
¿Alguna sugerencia?
Publicado: 16/03/2009 10:22 pm
Hi!
I used this menu: http://samples.unijimpe.net/menucss-v.html. Good on FF. But, not view good on IE when I used double on a site. only view good in load firt, and twice not view. pls help me and send to email. Thank big!
Publicado: 28/03/2009 2:00 am
Gracias por compartir, me funciono 100%
Publicado: 02/05/2009 6:34 pm
Buenas!
GRacias por compartir. Estaba buscando algo parecico. Thnx!!
Publicado: 25/06/2009 9:06 am
fino… envien material al correo
Publicado: 05/03/2012 8:13 pm
Funciona perfectamente con mysql e ie6. Muy buen trabajo. Gracias, felicitaciones.