Implementar Menu con CSS

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.

menu-css.gif

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:

  1. <ul>
  2.   <li><a href="#">Home</a></li>
  3.   <li><a href="#">Archivos</a></li>
  4.   <li><a href="#">Categorias</a>
  5.     <ul>
  6.       <li><a href="#">ActionScript</a></li>
  7.       <li><a href="#">JavaScript</a></li>
  8.       <li><a href="#">PHP</a></li>
  9.       <li><a href="#">MySQL</a></li>
  10.     </ul>
  11.   </li>
  12.   <li><a href="#">Foro</a></li>
  13.   <li><a href="#">Contactenos</a></li>
  14. </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.

  1. <title>Menu CSS - unijimpe</title>
  2. <link rel="stylesheet" type="text/css" href="nav-h.css" />
  3. <!--&#91;if gte IE 5.5&#93;>
  4. <script type="text/javascript" src="nav-h.js"></script>
  5. <!&#91;endif&#93;-->
  6. </head>
  7. <ul id="navmenu-h">
  8.   <li><a href="#">Home</a></li>
  9.   <li><a href="#">Archivos</a></li>
  10.   <li><a href="#">Categorias</a>
  11.     <ul>
  12.       <li><a href="#">ActionScript</a></li>
  13.       <li><a href="#">JavaScript</a></li>
  14.       <li><a href="#">PHP</a></li>
  15.       <li><a href="#">MySQL</a></li>
  16.     </ul>
  17.   </li>
  18.   <li><a href="#">Foro</a></li>
  19.   <li><a href="#">Contactenos</a></li>
  20. </ul>
  21. </body>
  22. </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.

  1. <title>Menu CSS - unijimpe</title>
  2. <link rel="stylesheet" type="text/css" href="nav-v.css" />
  3. <!--&#91;if gte IE 5.5&#93;>
  4. <script type="text/javascript" src="nav-v.js"></script>
  5. <!&#91;endif&#93;-->
  6. </head>
  7. <ul id="navmenu-v">
  8.   <li><a href="#">Home</a></li>
  9.   <li><a href="#">Archivos</a></li>
  10.   <li><a href="#">Categorias</a>
  11.     <ul>
  12.       <li><a href="#">ActionScript</a></li>
  13.       <li><a href="#">JavaScript</a></li>
  14.       <li><a href="#">PHP</a></li>
  15.       <li><a href="#">MySQL</a></li>
  16.     </ul>
  17.   </li>
  18.   <li><a href="#">Foro</a></li>
  19.   <li><a href="#">Contactenos</a></li>
  20. </ul>
  21. </body>
  22. </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



[…] UNIJIMPE, uno de los problemas mas comunes para un desarrollador, es el crear una barra de menú, pues […]

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

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


[…] ! necesito con urgencia un menu indexable ! , con la mirada puesta en ti ,lo […]

Manuel
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

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


Fernando
Publicado: 06/08/2008 10:14 am

Cambiar:
por:

Arenas
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

unijimpe
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");

zwoop
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

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

e-Lalo
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?

error in IE...
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!

Lucy
Publicado: 28/03/2009 2:00 am

Gracias por compartir, me funciono 100%

wearth
Publicado: 02/05/2009 6:34 pm

Buenas!

GRacias por compartir. Estaba buscando algo parecico. Thnx!!

efrain
Publicado: 25/06/2009 9:06 am

fino… envien material al correo

rafaelezco
Publicado: 05/03/2012 8:13 pm

Funciona perfectamente con mysql e ie6. Muy buen trabajo. Gracias, felicitaciones.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)