Implementar Menu con CSS

Submitted by webmaster on Sáb, 02/23/2008 - 21:10

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.