Tutorial - aprende a como crear un menu desplegable (navbar) responsive solo con css y html

jfdesousa7(63)

Published in

OCD

Words

492

Reading

3 min

Listen

Play

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">
&lt;input type="checkbox" id="nav_checkbox" class="nav_checkbox" /&gt;

&lt;label for="nav_checkbox" class="nav_toggle"&gt;
  
  &lt;svg class="menu" viewBox="0 0 448 512" width="100" title="bars"&gt;
    &lt;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" /&gt;
  &lt;/svg&gt;
  &lt;svg class="close" viewBox="0 0 384 512" width="100" title="times"&gt;
    &lt;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" /&gt;
  &lt;/svg&gt;
  
&lt;/label&gt; 

&lt;ul class="nav_menu"&gt;
  
  &lt;li&gt;&lt;a href="#"&gt;MI LOGO&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Nosotros&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Portafolio&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Clientes&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contacto&lt;/a&gt;&lt;/li&gt;
  
&lt;/ul&gt;

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

}
}