Como siempre, no hay imágenes, ni scripts, ni tablas en ésta página. Los efectos y la posición de los elementos están definidos en mi CSS.
IE6 y anteriores no soportan position:fixed, pero mediante este hack se puede conseguir de ellos que muestren un comportamiento similar.
<!--[if IE]>
<style>
body {height: 100%; overflow: auto}
</style>
<![endif]-->
Las etiquetas entre corchetes son propias de Internet Explorer, el resto de los navegadores las ignoran.
Además, dentro del if IE todos los elementos que estén como position:fixed los volveremos a definir como position:absolute
El menú es una simple lista desordenada como las de un artículo anterior, a la que he añadido un truco de Eric A. Meyer que, básicamente, consiste en meter un span dentro de los enlaces y después jugar con las propiedades display y hover
<a href="#">Portada<span><p>Ir a la portada</p></span></a>
#menu A SPAN {display: none}
#menu A:hover SPAN {display: block}
Ahora, para fijar el menú en el resto de navegadores, basta con usar la regla CSS1 position:fixed
#menu {
position: fixed;
margin-top: 70px;
color: #fff;
background: #000;
width: 25%;
}
Como puede verse, el menú nos acompaña mientras hacemos "scroll".
La hoja de estilo de esta página puede usarse como plantilla, si se añade algo al lateral izquierdo fuera del menú, deberá ir también como position:fixed (absolute en IE) para que el menú no lo cubra.
IE sólo mostrará correctamente los elementos fijos si está en modo estricto. Esto quiere decir que hay que usar un !DOCTYPE strict
He comprobado que Opera7 tiene problemas al mostrar el truco del span en position:fixed