Menú responsive completo con botón hamburguesa

4 minutos

Menu hamburguesa

En el siguiente tutorial, o código de ejemplo, podéis trabajar con un completo menú Responsive Design que se adapta tanto a escritorio como smartphone. Trabaja de diferente forma dependiendo del contexto. Cuando se encuentra en una resolución reducida podrás visualizar un botón hamburguesa que despliega un menú a pantalla completa del navegador. Mientras que en escritorio se ensancha ocupando todo el espacio disponible, colocando el logo a la izquierda y el navegador a la derecha en dirección horizontal.

Me he despreocupado de el aspecto visual porque busco dar una plantilla rápida para integrar. Además he insertado comentarios para que se pueda entender todos los detalles.

HTML5

Siguiendo un buen orden y usando etiquetas de contenido como <header> o <nav> y una lista desordenada para estructurar el menú, se construye la base en la cual trabajaremos con el CSS más adelante.

Adicionalmente, y siempre de manera opcional, se ha añadido un minimalista framework de JavaScript, AlpineJS en este caso, para gestionar los eventos. Tenemos 2 clics en móvil/celular: abrir menú y cerrar menú. Puedes usar JavaScript plano si tienes cierta experiencia.

<!-- AlpineJS para gestionar el evento Clic -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<!-- Header -->
<header x-data="{ open: false }" class="header">
  <!-- Logo -->
  <div class="header__logo">
    Logo
  </div>
  <!-- Boton abrir -->
  <button class="header__button-nav--open" x-on:click="open = true">Abrir</button>
  <!-- Navegador -->
  <nav class="nav" x-bind:class="open ? 'nav--show' : ''">
    <!-- Boton cerrar -->
    <div class="nav__button" x-on:click="open = false">
      <button class="header__button-nav--close">Cerrar</button>
    </div>
    <!-- Menu -->
    <ul class="nav__ul">
      <li class="nav__item"><a href="#" class="nav__link">Lorem.</a></li>
      <li class="nav__item"><a href="#" class="nav__link">Nulla.</a></li>
      <li class="nav__item"><a href="#" class="nav__link">Ut.</a></li>
      <li class="nav__item"><a href="#" class="nav__link">Doloremque.</a></li>
    </ul>
  </nav>
  <!-- Fin Navegador -->
</header>
<!-- Fin Header -->

CSS3

Hay que diferenciar entre los estilos que usaremos en resoluciones reducidas o escritorio. En el ejemplo se usa un corte a los 700px, pero puede ser cambiado por cualquier otra que necesitemos.

/* Estilos comunes */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #2aacb8;
  padding: 1rem;
}

/* Estilos móvil/celular */
@media all and (max-width: 700px) {

  /* Oculta el nav en la parte izquiera */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: red;
    transform: translateX(-100vw);
    transition: 0.5s;
  }

  /* Muestra el nav */
  .nav--show {
    transform: translateX(0);
  }

  .nav__button {
    text-align: right;
    margin: 1rem;
  }

  .nav__ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .nav__link {
    display: block;
    padding: 1rem;
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    color: black;
  }
}

/* Estilos Escritorio */
@media all and (min-width: 701px) {

  /* Oculta botón de abrir o cerrar */
  .nav__button,
  .header__button-nav--open {
    display: none;
  }

  /* Adapta el nav en horizontal */
  .nav__ul {
    display: flex;
    list-style: none;
    padding: 0;
  }

  .nav__link {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: black;
    transition: 0.5s;
  }

  .nav__link:hover {
    opacity: 0.5;
  }
}

Completo

Si desconocéis donde se debe situar cada elemento, dejo a continuación una versión unificada.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <style>
    /* Estilos comunes */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #2aacb8;
      padding: 1rem;
    }

    /* Estilos móvil/celular */
    @media all and (max-width: 700px) {

      /* Oculta el nav en la parte izquiera */
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: red;
        transform: translateX(-100vw);
        transition: 0.5s;
      }

      /* Muestra el nav */
      .nav--show {
        transform: translateX(0);
      }

      .nav__button {
        text-align: right;
        margin: 1rem;
      }

      .nav__ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .nav__link {
        display: block;
        padding: 1rem;
        font-size: 1.5rem;
        text-align: center;
        text-decoration: none;
        color: black;
      }
    }

    /* Estilos Escritorio */
    @media all and (min-width: 701px) {

      /* Oculta botón de abrir o cerrar */
      .nav__button,
      .header__button-nav--open {
        display: none;
      }

      /* Adapta el nav en horizontal */
      .nav__ul {
        display: flex;
        list-style: none;
        padding: 0;
      }

      .nav__link {
        display: block;
        padding: 0.5rem 1rem;
        text-decoration: none;
        color: black;
        transition: 0.5s;
      }

      .nav__link:hover {
        opacity: 0.5;
      }
    }
    </style>
</head>
<body>
    <!-- Header -->
    <header x-data="{ open: false }" class="header">
      <!-- Logo -->
      <div class="header__logo">
        Logo
      </div>
      <!-- Boton abrir -->
      <button class="header__button-nav--open" x-on:click="open = true">Abrir</button>
      <!-- Navegador -->
      <nav class="nav" x-bind:class="open ? 'nav--show' : ''">
        <!-- Boton cerrar -->
        <div class="nav__button" x-on:click="open = false">
          <button class="header__button-nav--close">Cerrar</button>
        </div>
        <!-- Menu -->
        <ul class="nav__ul">
          <li class="nav__item"><a href="#" class="nav__link">Lorem.</a></li>
          <li class="nav__item"><a href="#" class="nav__link">Nulla.</a></li>
          <li class="nav__item"><a href="#" class="nav__link">Ut.</a></li>
          <li class="nav__item"><a href="#" class="nav__link">Doloremque.</a></li>
        </ul>
      </nav>
      <!-- Fin Navegador -->
    </header>
    <!-- Fin Header -->
</body>
</html>

Extra: en SASS

Si usáis un generador como SASS, os dejo una replica adaptada de los estilos.

/* Estilos comunes

.header
  display: flex
  justify-content: space-between
  align-items: center
  position: fixed
  top: 0
  left: 0
  right: 0
  background: #2aacb8
  padding: 1rem

/* Estilos móvil/celular
@media all and (max-width: 700px)
  /* Oculta el nav en la parte izquiera

  .nav
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: red
    transform: translateX(-100vw)
    transition: 0.5s

    /* Muestra el nav
    &--show
      transform: translateX(0)

    &__button
      text-align: right
      margin: 1rem

    &__ul
      list-style: none
      padding: 0
      margin: 0

    &__link
      display: block
      padding: 1rem
      font-size: 1.5rem
      text-align: center
      text-decoration: none
      color: black

/* Estilos Escritorio
@media all and (min-width: 701px)

  /* Oculta botón de abrir o cerrar
  .nav__button, .header__button-nav--open
    display: none

  /* Adapta el nav en horizontal
  .nav
    &__ul
      display: flex
      list-style: none
      padding: 0

    &__link
      display: block
      padding: 0.5rem 1rem
      text-decoration: none
      color: black
      transition: 0.5s

      &:hover
        opacity: 0.5

Espero que os sea de ayuda.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

Donación con recompensa

  • 1 café: Respondo a tu duda en los comentarios.
  • 2 cafés: Respondo en menos de 24h a tu comentario.
  • 3 cafés: Todo lo anterior y además te doy las gracias en mis redes.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...