En el dia de hoy les mostrare como crear un menu desplegable responsive solo con css y html

Para iniciar ingresaremos en https://codepen.io/ y le damos click en nuevo Pen

lo primero que haremos sera crear el html :

<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
 <!-- Elaborado por Jose Fuentes https://codepen.io/jfdesousa7/pen/vYXvjxW -->
</head>
<body>
  
  <nav class="nav">
    
    <input type="checkbox" id="nav_checkbox" class="nav_checkbox" />
    
    <label for="nav_checkbox" class="nav_toggle">
      
      <svg class="menu" viewBox="0 0 448 512" width="100" title="bars">
        <path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" />
      </svg>
      <svg class="close" viewBox="0 0 384 512" width="100" title="times">
        <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" />
      </svg>
      
    </label> 
    
    <ul class="nav_menu">
      
      <li><a href="#">MI LOGO</a></li>
      <li><a href="#">Nosotros</a></li>
      <li><a href="#">Portafolio</a></li>
      <li><a href="#">Clientes</a></li>
      <li><a href="#">Contacto</a></li>
      
    </ul>
    
  </nav>
  
</body>

En primera instancia dentro del head tenemos agregado la fuente para este ejemplo que lo pueden conseguir ingresando en: https://fonts.google.com/specimen/Quicksand?sidebar.open=true&selection.family=Quicksand

creamos una etiqueta nav y dentro de ella colocamos el input que hara la activacion (switch) del menu en movil (responsive)

creamos una etiqueta label que contendra los dos iconos de menu y cerrar menu.

ahora crearemos una etiqueta ul y dentro 5 etiquetas li que contendrá la navegación

con eso tenemos listo nuestro html, ahora vamos a enfocarnos en el css de nuestro menu

css :

/* Color variables */

:root {
  --clr-primary : #6C63FF;
  --clr-secundary: #D4D3EF;
}

*,
*::before,
*::after {
  box-sizing : border-box;
  margin:0;
  padding:0;
}

body {
  font-family: 'Quicksand', sans-serif;
  font-weight: 900;
  color: var(--clr-primary);
  height: 100vh;
}



.nav .nav_toggle {
   position: absolute;
   cursor:pointer;
   margin: 0rem 1rem;
  right:0;
}

.nav .nav_toggle > svg {
  width: 1.5rem;
  fill: var(--clr-secundary);
}

.nav .nav_toggle .close {
  display : none;
}

.nav .nav_menu {
  margin-top: 0.2rem;
}

.nav .nav_checkbox {
  display: none;
}

.nav .nav_menu {
  display: flex;
  flex-direction: column;
  align-items:center;
  gap: 2rem;
  margin: 1rem;
}

.nav .nav_menu li {
  list-style: none;
  opacity: 0;
  transition: opacity  .5s ease-in-out;
}

.nav .nav_menu li:first-child {
  margin-right: auto;
  opacity: 1;
}


.nav .nav_menu li a {
  text-decoration : none;
  color: inherit;
  font-size: 1.2rem;
  
}


/* activar/desactivar el menu en movil*/

#nav_checkbox:checked ~ .nav_menu li {
  opacity: 1;
  
}


/*  mostrar / ocultar iconos respectivos */

#nav_checkbox:checked ~ label.nav_toggle .menu {
  display: none;
}

#nav_checkbox:checked ~ label.nav_toggle .close {
  display: block;
}


/*   Desktop  */

@media only screen and (min-width:560px){
  
  .nav .nav_toggle {
    display: none;
  }
  
  .nav .nav_menu {
    flex-direction :row;
  }
  
  .nav .nav_menu li {
    opacity : 1;
  }
  
}

ya estamos listos con nuestro menu css y html

podemos ver el ejemplo en vivo ingresando a mi pen en : https://codepen.io/jfdesousa7/pen/vYXvjxW

Espero les haya gustado este sencillo pero poderoso ejemplo para aquellos que inician en el diseno / desarrollo web.

Topics