Este documento es una traducción del tutorial "A pinned-down menu" propiedad de Bert Bos publicado en el sitio de W3C.
La versión en inglés de esta especificacivn es la única con valor normativo y puede encontrarse en: http://www.w3.org/Style/Examples/007/menus.html
(Esta página usa hojas de estilo CSS)
El menú que usted ve en la esquina superior derecha de esta página no es más que un DIV con algunos elementos A en su interior. Todo el trabajo para que se mantenga fijo se hace mediante reglas en la hoja de estilos. A continuación mostramos el HTML correspondiente, tomado directamente del código fuente de esta página:
<div class="banner"> <p> <a rel="nofollow" href="http://www.w3.org/"><img alt="W3C" src="http://www.w3.org/Icons/w3c_home"></a> <a rel="nofollow" href="http://www.w3.org/Consortium/Activities">Actividades</a> <a rel="nofollow" href="http://www.w3.org/TR/">Informes técnicos</a> <a rel="nofollow" href="http://www.w3.org/Help/siteindex">Índice del sitio</a> <a rel="nofollow" href="http://www.w3.org/Consortium/Translation/">Traducciones</a> <a rel="nofollow" href="http://www.w3.org/Status">Software</a> <a rel="nofollow" href="http://search.w3.org/">Búsqueda</a> <em>Relacionado:</em> <a rel="nofollow" href="http://www.w3.org/Style/">Estilos</a> <a rel="nofollow" href="http://www.w3.org/Style/CSS/">CSS</a> <a rel="nofollow" href="./">Trucos y sugerencias</a> </div>
En un navegador sin CSS (o con CSS desactivado), el menú aparecerá simplemente como un párrafo con enlaces. Pero gracias a las reglas siguientes, el menú parece "flotar" encima de la página, fijado a la esquina superior derecha de la ventana del navegador:
div.banner { margin: 0; font-size: 80% /*smaller*/; font-weight: bold; line-height: 1.1; text-align: center; position: fixed; top: 2em; left: auto; width: 8.5em; right: 2em; } div.banner p { margin: 0; padding: 0.3em 0.4em; font-family: Arial, sans-serif; background: #900; border: thin outset #900; color: white; } div.banner a, div.banner em { display: block; margin: 0 0.5em } div.banner a, div.banner em { border-top: 2px groove #900 } div.banner a:first-child { border-top: none } div.banner em { color: #CFC } div.banner a:link { text-decoration: none; color: white } div.banner a:visited { text-decoration: none; color: #CCC } div.banner a:hover { background: black; color: white }
Las reglas interesantes en este ejemplo son la regla "position: fixed
", que hace que el DIV quede fijo en la pantalla, y "display: block
", que convierte a los elementos A dentro del DIV en elementos de bloque que, de tal modo, se visualizan uno debajo del otro en vez de aparecer todos en una sola línea.
Es importante tener cuidado con el orden de las últimas tres reglas. Puesto que todas son igualmente específicas, la última en aplicarse será la que determine el color. Como queremos que cuando el usuario pase el puntero del ratón sobre el enlace se aplique la regla :hover
, esta regla debe ser la última.
El resto (márgenes, bordes, colores, etc.) puede eliminarse o modificarse de acuerdo a los gustos personales. Pero obsérvese cómo hicimos las líneas entre los enlaces: hay bordes encima de todos los enlaces menos el primero, gracias a la regla con ":first-child
". Un par de reglas como ésta (border-top en todos los elementos, más un borde igual a "none" en el primer hijo) es una forma muy conveniente de crear bordes entre elementos.
(Si examina las hojas de estilo reales enlazadas desde esta página, banner-o.css y banner.css, verá algunas reglas adicionales que parecen contradecirse entre sí. Están allí como medida de protección contra errores de programación en unos pocos navegadores más antiguos. En particular, en banner-o.css, el menú está oculto, y en banner.css se presenta en forma de bloque. El resultado es ocultar el menú en Netscape 4, ya que este navegador pasa por alto el @import de banner.css).
Si mira esta página con Microsoft Internet Explorer 5 ó 6 en Windows ("WinIE5" y "WinIE6"), observará que no funciona (al menos, con las versiones actuales, a septiembre de 2002). Muchas personas me preguntan sobre el particular, de modo que lo explicaré brevemente. En resumidas cuentas: el error está en el navegador, no en esta página.
WinIE5 y WinIE6 aún no han implementado la propiedad "fixed". Además de este inconveniente, hay un problema mayor y es que tampoco analizan correctamente la propiedad "position". Un navegador que desconozca la propiedad "fixed" debería descartar la regla "position: fixed" y usar como alternativa el valor previo de "position" en la hoja de estilo, cualquiera que sea. De ese modo, podríamos añadir "position: absolute" inmediatamente antes de "fixed", y el navegador usaría esa regla. Pero en WinIE 5 y 6 funciona de otro modo. Aparentemente, la palabra clave "fixed" se interpreta como "static".
No es posible hacer a WinIE5 y 6 interpreten correctamente la propiedad "fixed", pero existe una solución para este problema. Johannes Koch me advirtió sobre este truco (tomado de su colección de soluciones a problemas). En primer lugar, en lugar de la regla "position: fixed" en la hoja de estilo anterior ponemos "position: absolute", y luego insertamos la regla siguiente un poco más abajo en la hoja de estilo:
body>div.banner {position: fixed}
(Si el elemento DIV.banner está dentro de un elemento que no sea BODY, sustituya BODY por ese elemento). El efecto es que los navegadores que comprenden el selector de CSS ">" (hijo) usarán esta regla, mientras que los que no, en particular WinIE5 y WinIE6, la ignorarán. En cambio, usarán la regla "position: absolute", y el menú aparecerá en el lugar correcto, con la salvedad de que no se quedará fijo cuando el usuario desplace la ventana.
Es importante que no haya espacios alrededor de ">".