CursosEmpresasBlogLiveConfPrecios

Creación de Menú Desktop con HTML y CSS Básico

Clase 13 de 22 • Curso Práctico de Frontend Developer

Clase anteriorSiguiente clase
Resumen

Un menú desplegable o, lista desplegable, es un elemento de control gráfico que muestra al usuario una variedad de opciones de una categoría que puede elegir para realizar una acción como una compra. Esta tiene dos estados: activa o inactiva. Cuando está inactiva, enseña un solo valor.

A continuación llevaremos a cabo la estructura de lista de opciones que se desplegará del menú de navegación en la versión web de nuestro sitio.

menu.png

Cómo hacer una lista desplegable en HTML5

Esta sección del menú desktop tiene tres items, que le permitirán al usuario escoger entre: ingresar a su cuenta, ver sus órdenes o salir de la página. Es decir, forman una lista de opciones.

Recuerda que la semántica de HTML5 requiere que los elementos de las listas ( li ) estén dentro de una etiqueta contenedora especial ( ul / ol ).

Por lo tanto, la estructura es la siguiente:

<div class="desktop-menu">
    <ul>
      <li>
        <a href="/" class="title">My orders</a>
      </li>

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

      <li>
        <a href="/">Sign out</a>
      </li>
    </ul>
  </div>

Puedes emplear este shortcut
image

Estilos de CSS para listas dentro del menú

Esta vista del menú es como una caja que aparecerá cuando el usuario haga clic en su email. Por ahora, solo maquetaremos, puesto que en el curso de React.js le daremos funcionalidad.

Por lo que, debemos darle dimensiones y espaciado al contenedor.

.desktop-menu {
      width: 100px;
      height: auto;
      border: 1px solid var(--very-light-pink);
      border-radius: 6px;
      padding: 20px 20px 0 20px;
    }

Ahora, le quitamos los estilos por defecto a la lista.

    .desktop-menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

Finalmente, podemos definir la visual como nos especificó diseño.

    .desktop-menu ul li {
      text-align: end;
    }
    .desktop-menu ul li:nth-child(1),
    .desktop-menu ul li:nth-child(2) {
      font-weight: bold;
    }
    .desktop-menu ul li:last-child {
      padding-top: 20px;
      border-top: 1px solid var(--very-light-pink);
    }
    .desktop-menu ul li:last-child a {
      color: var(--hospital-green);
      font-size: var(--sm);
    }
    .desktop-menu ul li a {
      color: var(--back);
      text-decoration: none;
      margin-bottom: 20px;
      display: inline-block;
    }

Utilizamos display: inline-block para definirle un margin-bottom, puesto que a los elementos inline no es posible aplicarles la propiedad margin.

🙋 ¿Se te ocurre otra forma de llegar al mismo resultado?
Comparte tu código en la seccion de aportes y revisa las ideas de tus compañeros y compañeras.

Contribución creada por Guadalupe Monge Barale con los aportes de Fernando Molano Castrillón