Ing. En Computación

Menús verticales

Dije que era un adicto. No dije que tenía un problema.
House M.D., Greg House, médico
¿Sabías que con listas se pueden hacermenús verticales chulos? ¿Que por qué listas? Porque un menú vertical es una serie de elementos relacionados, y lo más semántico que podemos hacer es meterlo en una lista.
El principal problema es que las listas son feas. En el capítulo anterior vimoscómo hacerlas más bonitas, pero quizás queramos algo un poco más diferente para nuestro menú. CSS nos da la solución, así que ya no tendrás excusa para hacer un menú en Flash.
-------------------------------------------------
Que, por cierto, es de lo peor que se te podría ocurrir. Si alguien no tiene instalado el plugin de Flash (nunca des por supuesto que el vistante tenga instalado unplugin), ni siquiera podrá navegar por tu página.
En el menú que haremos ahora, hacemos apaños con los colores de fondo y los bordes para conseguir efectos cuando el ratón pase por encima. Puedes ver cómo quedaría en la figura 1. Como va con CSS, podríamos fácilmente incorporar imágenes, pero eso queda como ejercicio.
-------------------------------------------------
No tiene gracia si te lo dan todomascadito.

Figura 1: Menú vertical
-------------------------------------------------
Código XHTML
Al grano, necesitamos una lista tal que así:
-------------------------------------------------
<div id="menu">
-------------------------------------------------
 <ul>
-------------------------------------------------  <li><a href="..." title="...">Home</a></li>
-------------------------------------------------
  <li><a href="..." title="...">Archivos</a></li>
-------------------------------------------------
  <li><a href="..." title="...">Enlaces</a></li>
-------------------------------------------------  <li><a href="..." title="...">Acerca de</a></li>
-------------------------------------------------
 </ul>
-------------------------------------------------
</div>
-------------------------------------------------
La lista
¡A meterle mano al CSS! Empezaremos primero con darle la anchura que queramos a la lista (queserá la anchura del menú), poner una fuente maja y quitar las viñetas y márgenes de la lista.
-------------------------------------------------
#menu ul {
-------------------------------------------------
    list-style-type: none;
-------------------------------------------------
    margin: 0px;-------------------------------------------------
    padding: 0px;
-------------------------------------------------
    width: 200px;
-------------------------------------------------
    font-family: Arial, sans-serif;
-------------------------------------------------
    font-size: 11pt;
-------------------------------------------------
}
Ponemos acontinuación un color de fondo para los ítems de la lista (<li>). Lo normal sería poner aquí los efectos de hover, para que se activen cuando el ratón pase por encima de todo el bloque, no sólo del texto del enlace; pero Quien-Tú-Sabes en sus versiones 6 e inferiores no soporta hovers en cosas que no sean un enlace, así que vamos a tener que emplear una artimaña más adelante. Por ahora, el CSSpara el elemento li sería así de sencillo:
-------------------------------------------------
#menu ul li {
-------------------------------------------------
    background-color: #666;
-------------------------------------------------
}
-------------------------------------------------
Enlaces
Y aquí viene el chanchullo del que os...