Skip to Content »

Implementar Menu con CSS

  • 18/02/2008
  • 10:04 pm
  • unijimpe

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:

  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.

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

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

Posts Relacionados

Total de Comentarios: 5

Publicidad
Implementar un menú con CSS » Cosas sencillas
19/02/2008
3:15 am

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

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

Punto Web» Blog Archive » Menu indexable en css
19/04/2008
5:50 pm

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

Manuel
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

Enviar Comentario

(*)

(*)