CSS-Sésamo IV: Menús verticales
Permalink | Archivado en: CSS, Diseño y Desarrollo Web, Tutoriales
Hola, soy Coco, y en este capítulo de CSS-Sésamo vamos a aprender a hacer menús verticales que molen utilizando listas. ¿Por qué listas? Porque un menú es una serie de elementos relacionados, y lo más semántico que podemos hacer es meterlo en una lista.
El problema que tenemos es que las listas son feas. Bueno, ya vimos cómo hacerlas más bonitas, pero quizás queramos algo más especial para nuestro menú. CSS nos da la solución y ya no tendréis excusa para hacer un menú en Flash 
El menú que vamos a hacer es uno del estilo del de TintaChina. En ese menú, hacemos apaños con los colores de fondo y de bordes para conseguir efectos cuando pase el ratón por encima. Como va con CSS, podríamos fácilmente incorporar imágenes, pero eso os lo dejo como deberes.
Al grano, necesitamos una lista, tal que así:
<div id="menu"> <ul> <li><a href="#" title="Página principal">Home</a></li> <li><a href="#" title="Posts antiguos">Archivos</a></li> <li><a href="#" title="Enlaces">Blogroll</a></li> <li><a href="#" title="Información">Acerca de</a></li> </ul> </div>
Ahora toca la parte de CSS. Empezaremos primero con darle la anchura que queramos a la capa (que será la anchura del menú), poner una fuente maja y quitar las viñetas y márgenes de la lista:
#menu {
border: 1px solid #ddd;
}
#menu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
font-family: Arial, sans-serif;
font-size: 11pt;
}
Ponemos a continuación un color de fondo para los elementos de la lista (<li>). Ahora lo normal sería poner aquí también los efectos de hover, para que se activen cuando el ratón pasa por encima de todo el “bloque”, no sólo de las letras del enlace. Pero cierto navegador subdesarrollado (El-Que-Tú-Ya-Sabes) no soporta hovers en cosas que no sean un enlace, así que vamos a tener que usar una artimaña. Así que nuestro CSS para los elementos de la lista se queda muy sencillito:
#menu ul li {
background-color: #666;
}
Y ahora toca el chanchullo del que os hablaba antes para hacer el hover. Consiste en poner el enlace como si fuera un bloque, y así ocupará todo el li y podremos manipular sus dimensiones (esto mismo es lo que utilizábamos en un capítulo anterior para hacer cabeceras):
#menu ul li a {
color: #ccc;
text-decoration: none;
text-transform: uppercase;
display: block;
padding: 10px 10px 10px 20px;
}
Y ahora sólo nos quedan por hacer los cambios para el hover:
#menu ul li a:hover {
background-color: #000;
border-left: 10px solid #333;
color: #fff;
}
Si lo probáis, veréis que las letras se desplazan, debido al borde izquierdo que aparece cuando se produce el hover. Si no os gusta este efecto, podéis añadir esta línea al link cuando está normal (es decir, dentro de #ul li a), que lo que hace es poner un borde del mismo color de fondo de los li (y así parece que no existe):
border-left: 10px solid #666;
¡Nos vemos en el próximo capítulo!
9 comentarios »
Si quieres hacer un trackback, usa esta TrackBack URI
Escribe un comentario
Los párrafos y saltos de línea se ponen de forma automática. La dirección de e-mail no se mostrará nunca. Se permiten las siguientes etiquetas XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
muy bueno muchas gracias
Comentario de pablogv — 02-11-05 2:04 pm
Muy bueno, sigue así. Aunque yo quiero avanzados de como hiciste tu menú
Comentario de show — 02-11-05 2:32 pm
Mi menú tiene tela… Pero algún día lo explicaré
Comentario de BenKo — 02-11-05 2:36 pm
Me niego a considerar cualquier elemento mas o menos ordenado una lista, y menos a usar listas para los menus
No me parece que sea su funcion por mucho que digan los estirados/radikales seguidores del w3c (si los hay xD)
Comentario de th1nk3r — 02-11-05 7:41 pm
¿Entonces como diferencias cada elemento del menú si están todos “inline” a palo seco? Sería tratado como un texto normal por los lectores de pantalla…
PD: Eh, que yo no soy radical xD
Comentario de BenKo — 02-11-05 7:45 pm
Hola BenKo!!!
Me ha caido el tutoril de XHTML+CSS a3 en las manos y me gusta mucho!!, Felicidades, Solo una pregunta, los nuevos capitulos que vas añadiendo saldran en PDF?
Salut
Comentario de Pau — 23-11-05 2:15 pm
Sí, pero ya cuando haya acabado todos… O cuando alguien se anime a pasarlos él mismo a PDF, que para eso le he puesto licencia que permite obras derivadas
Comentario de BenKo — 23-11-05 2:32 pm
Hola Lady… mi motivo es por soy nuevo en esto del diseño he leido tus tutoriales son muy buenos me han dado ideas claras de con que se come el diseño web =D pero en algunas cosas no entiendo por ejemplo el background quiero colocar una imagen de fondo pero el link me jode no consigo colocar la imagen que quiero no se si porq esta mal redireccionada o porq sencillamente me quiere joder =P te pido por favor que me ayudes asi mas o menos es como yo lo estoy haciendo corrigeme si estoy mal /* color de fondo e imagen en mosaico */
{
background-image: #000 url (”/g:/avatars/jhony192full.jpg” ) ;
background-attachment: fixed 50% 50% ;
background-repeat: ;
}
ah y por fa hablame en castellano no te vayas tan avanzado en tus terminos recuerda que soy nuevo Gracias y Disculpa tanta molestia =D ..!!!!
Comentario de Creative — 19-05-06 7:51 pm
Las rutas de las imágenes ponlas siempre relativas al sitio donde esté la hoja de estilos. Por ejemplo, si tienes la hoja de estilos en loquesea/web/styles.css y las imágenes en loquesea/web/avatars/imagen.jpg tendrías que poner:
background-image: url(’avatars/imagen.jpg’);
Comentario de BenKo — 19-05-06 8:44 pm