Cómo crear: botón de navegación lateral

Cómo crear una navegación lateral suspendible

Primer paso - Añadir HTML:

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">Acerca de</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Proyectos</a>
  <a href="#" id="contact">Contacto</a>
</div>

Segundo paso - Añadir CSS:

/* establece el estilo de los enlaces dentro de la navegación lateral */
#mySidenav a {
  position: absolute; /* las ubica en relación con la ventana del navegador */
  left: -80px; /* las coloca más allá de la pantalla */
  transition: 0.3s; /* añade un efecto de transición al pasar el ratón */
  padding: 15px; /* 15px de relleno interno */
  width: 100px; /* establece un ancho específico */
  text-decoration: none; /* elimina la subrayadura */
  font-size: 20px; /* aumenta el tamaño de la fuente */
  color: white; /* establece el color del texto en blanco */
  border-radius: 0 5px 5px 0; /* las esquinas superior derecha e inferior derecha son redondas */
}
#mySidenav a:hover {
  left: 0; /* al pasar el ratón, muestra el elemento de la manera que debería */
}
/* enlace about: a 20px de distancia del borde superior, fondo verde */
#about {
  top: 20px;
  background-color: #04AA6D;
}
#blog {
  top: 80px;
  background-color: #2196F3; /* azul */
}
#projects {
  top: 140px;
  background-color: #f44336; /* rojo */
}
#contact {
  top: 200px;
  background-color: #555 /* claroscuro */
}

Prueba personalmente

Páginas relacionadas

Tutorial:Barra de navegación de CSS