Crear un sidebar o menú lateral con puro CSS

Con CSS, podemos realizar múltiples operaciones como hemos mostrado en este blog; hoy veremos cómo crear un sidebar o menú lateral con solo CSS.

Definimos el HTML con las opciones:

<div class="container">
  <nav>
    <a href=".">Option 1</a>
    <a href=".">Option 2</a>
    <a href=".">Option 3</a>
    <a href=".">Option 4</a>
  </nav>

Y el CSS, vamos a crear un contenedor, que para evitar el desplazamiento lateral, ocultamos el contenido:

  .container {
    overflow: hidden;
    position: relative;
    height: 15em;
    max-width: 25em;
    margin: auto;
    border: 0.2em solid black;
  }

Para el menú lateral, será una caja oculta a la derecha con un sobresaliente para poder posicionarse sobre el mismo:

  nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 100%;
    padding: 1em;
    background-color: skyblue;
 
    transform: translateX(1em);
    transition: 0.2s transform;
  }

Al posicionarse sobre el mismo, activamos el efecto hover, en el cual desplazamos mediante las traslaciones en CSS en el eje de las X:

  nav:hover,
  nav:focus-within {
    transform: translateX(100%);
  }

Finalmente, el código completo para que lo puedas probar y personalizar:

<div class="container">
  <nav>
    <a href=".">Option 1</a>
    <a href=".">Option 2</a>
    <a href=".">Option 3</a>
    <a href=".">Option 4</a>
  </nav>
</div>
 
<style>
  .container {
    overflow: hidden;
    position: relative;
    height: 15em;
    max-width: 25em;
    margin: auto;
    border: 0.2em solid black;
  }
 
  nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 100%;
    padding: 1em;
    background-color: skyblue;
 
    transform: translateX(1em);
    transition: 0.2s transform;
  }
 
  nav:hover,
  nav:focus-within {
    transform: translateX(100%);
  }
 
  a {
    white-space: pre;
    color: black;
  }
 
  p {
    font-size: 2em;
    text-align: center;
  }
</style>

Enlace original: https://lexoral.com/blog/you-dont-need-js/

CSS

Menú

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy