Cómo crear un menú de navegación responsivo con HTML, SCSS y JavaScript

En el desarrollo de sitios web modernos, es esencial contar con un menú de navegación responsivo que se adapte a diferentes dispositivos y tamaños de pantalla. En esta entrada del blog, aprenderemos a crear un menú de navegación responsivo utilizando HTML, SCSS y JavaScript.

En el HTML muestra la estructura básica del menú de navegación. Utilizamos la etiqueta <nav> como contenedor principal y dentro de ella agregamos una etiqueta <ul> para listar los elementos del menú. Cada elemento de menú se encuentra dentro de una etiqueta <li> y se enlaza a una página específica mediante la etiqueta <a>. Todo ello dento de la etiqueta <header>.

<body>
    <header>
      <h1>FuturaDrive</h1>
       <nav>
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Services</a></li>
          <li><a href="">Contact</a></li>
        </ul>
        <i class="fas fa-bars"></i>
       </nav>     
    </header>
  </body>

En el SCSS, se utilizan variables SCSS, se usa un diseño de cajas flexibles con FLEX y utiliza la característica de nesting (anidamiento) de SCSS para agrupar selectores relacionados y reducir la repetición de código. Para aplicar estilos específicos según el tamaño de la pantalla o el dispositivo., se usan media queries.

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@800&display=swap');

$primary-color-text: #fff;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  body {
    min-height: 100vh;
    background-image: url('https://source.unsplash.com/L8oIdSYOTKs');
    background-size: cover;
    background-position: center;
  }

  header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 2rem 0;

    h1 {
      font-family: 'Orbitron', sans-serif;
      font-weight: 800;
      color: $primary-color-text;
      font-size: 3rem;
    }

    nav ul {
      display: flex;

      li {
        list-style: none;

        a {
          text-decoration: none;
          color: $primary-color-text;
          font-size: 1rem;
          padding: 1rem 1.5rem;
          transition: all .4s;

          &:hover{
            opacity: 0.7;
          }
        }
      }
    }

    .fa-bars {
      color: #fff;
      font-size: 1.5rem;
      cursor: pointer;
      display: none;
    }

    .show-menu {
      opacity: 1;
      visibility: visible;
    }

    a:hover {
      transition: all 0.4s;
    }
  }
    /* Media Query */
    @media (max-width: 900px) {
      header{ 
        nav ul {
        flex-direction: column;
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(15px);
        border-radius: 1rem;
        position: absolute;
        right: 0.7rem;
        top: 100px;
        width: 400px;
        padding: 1rem;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s;

        li {
          padding: 1rem;
          text-align: center;
        }
      }

      .fa-bars {
        display: block;
      }
    }
  }

  @media (max-width: 500px) {
    header{ 
      nav{ 
        display: flex;
        justify-content: center;
        ul {
          width: 95%;
        }
      }
    }
  }

En el Javascript, se una sencilla técnica que se basa en añadir o quitar una clase cuando se hace click en el elemento con el icono de hamburguesa a través de la propiedad classList y su método toggle().

<script>
    const menuToggle = document.querySelector('.fa-bars');
    const navMenu = document.querySelector('nav ul');

menuToggle.addEventListener('click', () => {
  navMenu.classList.toggle('show-menu');
});

  </script>

Recuerda compilar el archivo “styles.scss” en un archivo CSS llamado “styles.css” antes de utilizarlo en tu sitio web.

¡Con estos pasos sencillos, puedes crear un menú de navegación responsivo y mejorar la experiencia de tus usuarios en dispositivos móviles!

Deja una respuesta Cancelar la respuesta