Truquitos en XHTML y CSS: Menus rápidos
yon
Thursday
1 June 2006 16:52
Los menús son una parte muy vistosa de una web, y mientras hay muchos que confunden vistoso con “enmarañadisimo conjunto de imágenes y tablas sin sentido” aqui vamos a ver tres consejillos que harán vuestros menús algo bonito, personal y accesible.
Código básico
Los menús deberían ir siempre en una lista, que, además de definir correctamente de lo que hablamos, permite manejar perfectamente los elementos que tenemos:
<div id="menu">
<ul id="menu_list">
<li><a href="#" class="activo">Item uno </a></li>
<li><a href="#" >Item dos </a></li>
<li><a href="#" >Item tres </a></li>
<li><a href="#" >Item cuatro </a></li>
<li><a href="#" >Item cinco </a></li>
Menu Vertical
Las listas se presentan por defecto en vertical, así que lo único que nos preocupa en este momento es que el ancho de todos los elementos sea igual y, también podamos aprovecharnos de la propiedad :hover. Lo malo es que esta propiedad en IE solo la tienen los elementos a.
Para ello, haremos que los elementos a ocupen el 100% del li que los contiene.
#menu_list li {
list-style: none; text-align: left;
margin: 0px; padding:0px;
border: 1px solid gray;
}
#menu_list li a {
display: block; width:100%;
padding: 0.25em;
background: #CCD; text-decoration: none;
}
#menu_list a:hover {
border-color: #FE3; color: #FFF; background: #332;
}
#menu_list li a.activo {
background: #BBC;
}
Menu Horizontal
Este es el menu al que estamos acostumbrados en esto de los entornos gráficos de ventanas, así que es el mas natural para muchos usuarios, pero tenemos una limitación en el ancho(hoy no vamos a hablar de menus desplegables). Podemos basarnos en mucho código de lo anterior, pero lo importante en este caso es mostrar todos los elementos de la lista en una sola línea (atención al ancho total que destrozaría el efecto).
#navlist li {
display: inline;
list-style-type: none;
}
Elemento activo
Una parte muy interesante de los menus es poder indicar al usuario en que sección de la web se encuentra a través de un elemento activo. A pesar de que los lenguajes de programación en servidor permiten añadir la marca class=”activo” de manera dinámica, vamos a ver un truquito para los que no puedan (o no quieran) usar porgramación y que también permite aplicar distintos estilos a una misma página… (esto o cuento otro día) y añadir al body un id y luego actuar en consecuencia a la hora del menu.
<head>
<style>
#inicio .menu_inicio, #contacto .menu_contacto {
background-color: red;
}
</style>
</head>
<body id="contacto">
<ul id="menu">
<li><a href="#" class="menu_inicio">Inicio</a></li>
<li><a href="#" class="menu_contacto">Contacto</a></li>
</ul>
</body>
Conclusiones y referencias
Parte de lo contado aqui está basado en lo aprendido en Listamatic MaxDesign (el mejor sitio para iniciar la programación de un menu, sabiendo el soporte que dan los navegadores) y More CSS Tricks.
