Estoy comenzando a aprender hace poco y luego de ver y practicar css grid y flexbox quiero poder realizar un menu que sea desplegable (con un icono de 32x32 pixeles), pero no estoy pudiendo realizar el acabo final.
Dejé a la imagen del ícono dentro de un label, le agregué antes un input con checkbox ambos con el mismo id.
La idea es que al activar el checkbox del input el menu debe desplegarse desde arriba. Pude posicionarlo fuera de la pantalla con un position:absolute y margin-top: -75%; entonces al activar el checkbox y con: #despleg_menu:checked ~ .nav_menu { margin-top: 0%;}. Debería volver al nav debajo del checkbox, pero no logro entender por qué no.
Pregunta: ¿por qué no vuelve a la posición inicial usando :checked?
*{
margin: 0px;
padding: 0px;
}
.container{
display:grid;
grid-template-columns: auto;
grid-template-rows: 35px 30px 1fr;
grid-template-areas:
"a a a a"
"b b b b"
"c c c c";
}
.container .logo{
background: black;
height: 35px;
color:white;
font-family: "Lobster", cursive;
font-size: 11px;
padding: 0px 0px 0px 10px;
grid-area: a;
display: flex;
align-items: center;
justify-content: center;
}
.container .menu_img{
height: 30px;
background: black;
grid-area: b;
display: flex;
justify-content: center;
}
.container .menu_ul{
grid-area: c;
display: flex;
justify-content: center;
background: black;
}
a{
text-decoration: none;
}
nav ul{
background-color: black;
}
nav li{
list-style-type: none;
padding-right: 25px;
height: 30px;
color: white;
font-size: 19px;
font-family: 'Changa', sans-serif;
background: linear-gradient(90deg,white, goldenrod);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
transition: font-size 0.1s;
}
li:hover{
font-size: 21px;
}
.nav_menu{
position: absolute;
margin-top: -75%;
transition: top 0.2s;
}
#despleg_menu:checked ~ .nav_menu {
margin-top: 0%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Changa:wght@500&display=swap" rel="stylesheet">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="logo">
<h2>Diseño-Web</h2>
</div>
<div class="menu_img">
<input type="checkbox" id="despleg_menu">
<label for="despleg_menu">
<img src="menu_white_gols.png" alt="Img Menu">
</label>
</div>
<div class="menu_ul">
<nav class="nav_menu">
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Proyectos</a></li>
<li><a href="">Contacto</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>
~
, como su nombre lo indica afecta a los hermanos (hijos de un mismo padre). No funciona porque.nav_menu
es "primo" de#despleg_menu
. Tendrías que cambiar bastante el markup como para que te funcione.