DEV Community

Cover image for Barra de navegación responsive (Mobile first)
Gastón Tognola
Gastón Tognola

Posted on • Updated on • Originally published at tosch.dev

 

Barra de navegación responsive (Mobile first)

¡Hola chicos! Vamos a arrancar con un ejemplo de una barra de navegación responsive, usando Mobile First.

Código básico de la barra de navegación:

<header>
  <h1> Titulo </h1>

  <nav>
    <span class="menu-button"></span>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </nav>

</header>
Enter fullscreen mode Exit fullscreen mode

Puntos importantes en el estilo CSS:

  • Contenedor header:

    • display: flex y justify-content: space-between. Para ubicar en extremos opuestos al logo y a la barra de navegación.
  • Contenedor nav:

    • ul: display: none, ya que la idea es hacerlo mobile first, la lista de navegación se visualizará cuando se pase el mouse por arriba o se haga click en el botón del menú.
*{
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

header{
  background-color: grey;
  height: 8vh;
  display: flex;
  justify-content: space-between;
}

header ul{
  display:none;
}

header h1{
  line-height: 8vh;
  margin-left:.5em;
}

.menu-button {
  display: inline-block;
  margin: 1vh;
  height: 6vh;
  width: 6vh;
  border: 1px solid black;
  line-height: 6vh;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Vista de escritorio:

Dos cosas importantes a hacer ahora son:

  • Ocultar el botón del menú (.menu-button) con diplay:none
  • Ahora sí, visualizar la lista*+ con los links de navegación con **display:block.

Todo esto, por supuesto, dentro de un @media query.

@media screen and (min-width: 768px){
  .menu-button{
    display: none;
  }

  nav ul{
    display: block;
  }

  nav ul li{
    list-style: none;
    display: inline-block;
    line-height: 8vh;
    margin: 0 .5em;
  }
}
Enter fullscreen mode Exit fullscreen mode

Resultado

Paso siguiente

Ahora queda dar funcionalidad al menú hamburguesa (sólo con css), ver en este post.

Top comments (0)

50 CLI Tools You Can't Live Without

The top 50 must-have CLI tools, including some scripts to help you automate the installation and updating of these tools on various systems/distros.