Menu lateral fijo

Habitualement en las páginas de un sitio web se sitúa una barra de navegación en la aprte superior para los enlaces otras secciones o partes del mismo sitio.

Pero también es muy útil usar una barra lateral, como menú principal del sitio o como índice para páginas de una sección concreta.

Mantener esta barra lateral fija cuando hacemos scroll en el contenido de la página puede resultar muy útil para facilitar la navegación y para orientar al usuario dentro de nuestra web

Mantener esta barra estática puede lograrse usando solo CSS y HTML como verás en este ejemplo.

El codigo HTML

Como es habitual primero vamos al código HTML y bosquejamos la estructura de la página: vamos a tener dos bloques, uno para la columna lateral que puede contener un menú y otro para lo que sería el contenido de la página.

<main>

<header>Indice</header>

</ul>

</div>

Aquí está el contenido de este bloque

Rellena con suficiente espadio para que supere

la altura de la pantalla y aparezca el scroll

</div>

Ves los dos bloques con las clases nombradas como lateral (para la barra) y principal, para el contenido. Hemos puesto una header para el título cabecera de la barra lateral, que en este ejemplo contiene un menú.

Todo el contenido está en un bloque main que actúa como contenedor.

Como es normal si ves ahora esta página en el navegador se verá sin ningún formato, y por supuesto todo scrolleable. Nos fatla el CSS.

Estilos CSS.

Las reglas CSS usan la propiedad position: fixed para mantener la barra inmóvil aún al hacer un scroll. Hay que tener en cuenta que este valor hace que la barra tenga como referencia la ventana del navegador, no su contenedor. Por tanto las dimensiones que se especifiquen con porcentajes se referiraán a la ventana y las posiciones también.

@charset "utf-8";

html{

height:150vh;

}

main{

width: 80%;

height: auto;

margin:0 auto;

background: aliceblue;

}

.lateral{

box-sizing: border-box;

width: max(8%, 200px);

display: inline-block;

position: fixed; padding-top: 30px

}

.principal{

margin-left: max(10%, 200px);

padding: 0 10px;

height: 150vh;

/*hacer la página más alta que la ventana */

text-align: justify;

background:white;

}

/*Hasta aquí ya tenemos un menu lateral fijo,

ahora viene ponerlo bonito*/

.lateral header{

font-weight: bold;

font-size: 1.5rem;

text-align: center;

border-bottom: 1px solid black;

background: aqua

}

.lateral ul{

list-style:none;

padding-left:0;

margin-top:0;

}

.lateral ul li{

display:block;

position: relative;

padding: 8px 10px;

margin-left:0;

border-bottom:1px solid #060696

}

.lateral ul li a{

color: black;

text-decoration:none;

}

.lateral ul li a:after{

content: ' ';

position:absolute;

width: 100%;

height: 100%;

top:0;

left:0;

}

.lateral ul li:hover, .lateral ul li:hover a{

background: blue;

color: white;

}

Las primeras reglas sirven para crear y fijar la barra lateral. Con ellas ya tienes la bara anclada en el lateral gracias a position: fixed y top:0 . Pero queda muy esquemática.

Estas reglas son bastente responsive, eso se ha conseguido con los anchos y posicionamientos calculados.

La barra fija tiene un ancho variable con un valor mínimo de 200px. Recuerda que el porcentaje se refiere al ancho total de la ventana. La función clc devuelve el máximo entre el 8% de la ventana y 200px, así si la ventana se estrecha demasiado su anchura queda en 200px

El bloque con el contenido, principal, necesita estar desplazado para dejar espacio a la barra. Esto se ha hecho con un margin-left, este margen izquierdo tiene un valor mínimo de 200px. La función da el mázimo entre el 10% del contenedor y 200px

El bloque principal le damos un ancho 50% superior al alto de la ventana con la intención de que se ve como el scroll no afecta a la columna lateral

Determnar los porcentajes no es difícil. Se ha buscado que el ancho el margin sean un 10% de main (el contenedor). En el caso del bloue principal se puede usar directamente este porcentaje. Para la barra fija se usa el 10% de main es el 8% el 8% de la ventana (10%*8%).

Pero si prefieres mantener valores fijos puedes hacerlo. Recuerda que el bloque con el contenido debe tener margen izquierdo suficiente para que no se solape con la barra.

Sea un menú o una zona de comentarios u otro contenido qurremos que quede bien a la vista, agradable y fácil de utilizar. Para eso tenemos las reglas de la segunda parte: los efectos hover, ampliar el link a todo el div, colores, tipos ....

Como reto si quieres puedes probar este efecto con sticky en lugar de fixed. Si usas este métdo la barra se moverá hasta antes de quedar oculta al hacer scroll.