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
