Cómo crear: barra lateral fija

Crear barra lateral fija

Primer paso - Añadir HTML:

/* Navegación lateral */
<div class="sidenav">
  <a href="#">Acerca de</a>
  <a href="#">Servicios</a>
  <a href="#">Clientes</a>
  <a href="#">Contacto</a>
</div>
/* Contenido de la página */
<div class="main">
  ...
</div>

Segundo paso - Añadir CSS:

/* Menú de la barra lateral */
.sidenav {
  altura: 100%; /* Altura completa de la pantalla: si desea altura 'automática', elimine esta configuración */
  ancho: 160px; /* Ancho de la barra lateral */
  posición: fijo; /* Barra lateral fija (se mantiene en su lugar al desplazarse) */
  índice-z: 1; /* Siempre en la parte superior */
  arriba: 0; /* Siempre en la parte superior */
  izquierda: 0;
  color de fondo: #111; /* Negro */
  desbordamiento-x: oculto; /* Deshabilita el desplazamiento horizontal */
  relleno superior: 20px;
}
/* Enlaces del menú de navegación */
.sidenav a {
  relleno: 6px 8px 6px 16px;
  decoration de texto: none;
  tamaño de fuente: 25px;
  color: #818181;
  display: bloque;
}
/* Cambia el color cuando el ratón se coloca sobre el enlace de navegación */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Estilo de contenido de la página */
.main {
  margen izquierdo: 160px; /* Igual al ancho de la barra lateral */
  relleno: 0px 10px;
}
/* En pantallas pequeñas con altura menor a 450 píxeles, cambia el estilo de la barra lateral (menos relleno interno y tamaño de fuente más pequeño) */
@media screen and (max-height: 450px) {
  .sidenav {relleno superior: 15px;}
  .sidenav a {tamaño de fuente: 18px;}
}

Páginas relacionadas

Tutoriales:Barra de navegación de CSS

Tutoriales:¿Cómo crear una barra de navegación lateral?