Lección 9: Menú | Curso de Maquetación Web

Lección 9: Menú

En la siguiente lección, o código de ejemplo, crearemos un completo menú Responsive Design que se adapta tanto a escritorio como smartphone. 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.

Empezaremos con una buena estructura del HTML, 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. Se debe a que tenemos 2 clics en móvil/celular que deben añadir o quitar la clase open encargada mostrar u ocultar el 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 -->

Ahora vamos a centrarnos en los estilos CSS. Usaremos 2 tipos, dependiendo de si la resolución es reducida o amplia para escritorio. Usaremos un corte a los 700px, pero puede ser cambiado por cualquier otra que necesites.

/* 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;
  }
}

A continuación puedes apreciar un ejemplo donde se unifica ambos códigos, 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

Y con esto, ya tenemos un menú de navegación adaptable a cualquier dispositivo.

Si quieres obtener más información sobre otros tipos menús de navegación, puedes visitar los siguientes tutoriales:

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

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario