Navegación lateral plegable

Parte de la sección JavaScript in Action del Journey de HTML de Coddy — lección 14 de 27.

Una navegación lateral plegable es un menú oculto en el lateral de la pantalla que se desliza hacia adentro cuando se hace clic en un botón. Ayuda a ahorrar espacio a la vez que ofrece a los usuarios un acceso rápido a los enlaces de navegación.

Crea una estructura HTML básica con una navegación lateral y un botón de alternancia:

<button id="toggleNav">☰ Menu</button>

<nav id="sideNav" class="sidenav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

Añade CSS para dar estilo a la navegación lateral:

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 60px;
}

.sidenav.open {
  width: 250px;
}

Agrega JavaScript para alternar la navegación:

const toggleBtn = document.getElementById('toggleNav');
const sideNav = document.getElementById('sideNav');

toggleBtn.addEventListener('click', function() {
  sideNav.classList.toggle('open');
});

Cuando se hace clic en el botón, la navegación lateral se deslizará hacia adentro o hacia afuera dependiendo de su estado actual.

Desafío

Fácil

Haz que el botón del menú sea funcional:

HTML: Conecta el botón del menú a una función de JavaScript utilizando el atributo onclick

JavaScript: Escribe una función que abra la navegación lateral estableciendo su ancho a "250px"

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>Scandinavian Interior Design</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="sideNav" class="sidenav">
    <a href="javascript:void(0)" class="close-btn" onclick="closeNav()">X</a>
    <a href="#">Home</a>
    <a href="#">Philosophy</a>
    <a href="#">Materials</a>
    <a href="#">Inspiration</a>
    <a href="#">Contact</a>
  </div>

  <header>
    <span class="open-btn">☰ Menu</span>
    <h1>Scandinavian Interior Design</h1>
  </header>

  <main>
    <section>
      <h2>Calm, Functional, Beautiful</h2>
      <p>
        Scandinavian design is about more than looks — it’s about balance,
        comfort, and harmony. Spaces are uncluttered, airy, and filled with
        light, making homes feel both inviting and practical.
      </p>
    </section>

    <section>
      <h2>Natural Materials</h2>
      <p>
        Wood, stone, wool, and linen are at the heart of Scandinavian interiors.
        These natural elements bring warmth and a sense of connection to nature,
        while ensuring that every item is purposeful and timeless.
      </p>
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>