Creación de Menú Responsive en HTML y CSS para Móviles

Es momento de crear el menú de navegación para la versión móvil o responsive de nuestra tienda virtual y esta estructura presenta tres listas con distintas opciones. Recuerda que configurar esta versión del sitio ayuda a que pueda fluir mejor en todos los tamaños de pantalla y ahorra tiempo porque no necesitas tener dos versiones de un sitio web.

Estructura semántica de un menú para dispositivos móviles

El menú para la version móvil de nuestra tienda contiene tres secciones y al ser listas las podemos contener en etiquetas ul. Primero, debemos generar el contenedor principal que posibilitará su posterior estilización.

<div class="mobile-menu">

En segundo lugar, definimos las secciones. La primera sección corresponde a las categorías

<ul>
      <li>
        <a href="/">CATEGORIES</a>
      </li>
      <li>
        <a href="/">All</a>
      </li>
      <li>
        <a href="/">Clothes</a>
      </li>
      <li>
        <a href="/">Electronics</a>
      </li>
      <li>
        <a href="/">Furnitures</a>
      </li>
      <li>
        <a href="/">Toys</a>
      </li>
      <li>
        <a href="/">Other</a>
      </li>
    </ul>

Luego, tenemos las órdenes y cuenta del usuario.

 <ul>
      <li>
        <a href="/">My orders</a>
      </li>
      <li>
        <a href="/">My account</a>
      </li>
    </ul>

Finalmente, mostramos su email y la posibilidad de salir de la página.

    <ul>
      <li>
        <a href="/" class="email">platzi@example.com</a>
      </li>
      <li>
        <a href="/" class="sign-out">Sign out</a>
      </li>
    </ul>

Especifidad en CSS

Tal como hicimos con el menú desktop, para estilizar esta vista, debemos quitar la decoración por defecto de las listas y etiquetas a, separ los contenedores definiendo margin y padding; añadir los colores y estilos de fuente.

Así quedaría nuestro CSS:

.mobile-menu {
      padding: 24px;
    }
    .mobile-menu a {
      text-decoration: none;
      color: var(--black);
      font-weight: bold;
      /* margin-bottom: 24px; */
    }
    .mobile-menu ul {
      padding: 0;
      margin: 24px 0 0;
      list-style: none;
    }
    .mobile-menu ul:nth-child(1) {
      border-bottom: 1px solid var(--very-light-pink);
    }
    .mobile-menu ul li {
      margin-bottom: 24px;
    }
    .email {
      font-size: var(--sm);
      font-weight: 300;
    }
    .sign-out {
      font-size: var(--sm);
      color: var(--hospital-green);
    }

---

En la última sección tenemos un problema de especificidad. No se está aplicando el font-weight de la clase email, ni el color de la clase sing-out.

La especificidad consiste en dar un valor a una regla CSS sobre qué tan específico es el estilo, esto para que los navegadores puedan saber qué estilos aplicar sobre otros, independientemente de dónde se encuentren en el código. El estilo se aplicará donde la especificidad sea mayor.

Al entender los tipos de especificidad, comprendemos que demos aumentar el valor o peso de las clases email y sing-out.

Existen varias formas de conseguirlo. Una es hacer uso de !important.

    .email {
      font-weight: 300 !important;
    }
    .sign-out {
      color: var(--hospital-green) !important;
    }

Otra manera es llamar a las dos clases.

.mobile-menu .menu-email {
            font-size: var(--sm);
            font-weight: 300;
        }
  .mobile-menu .menu-signout {
            font-size: var(--sm);
            color: var(--hospital-green);
        }

---

❓ ¿Se te ocurre otra forma?

---

---

Revisa la sección de aportes para ver más opciones. Comprobarás que hay muchos caminos que llegan al mismo destino.

---

---

Contribución creada por: Guadalupe Monge Barale con los aportes de Andrés Guano.