0

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>

3
  • El selector de hermanos ~, 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.
    – Marcos
    Commented el 24 may. 2022 a las 0:31
  • Gracias, los puse en un mismo div y quedaron como hermanos, así pasó a funcionar. Eliminando el <div class="menu_ul">, no puedo darte el crédito porque al responder como comentario no habilita esa opción de ninguna forma.
    – Vic ED
    Commented el 28 may. 2022 a las 2:31
  • Genial! Me alegro que hayas podido resolverlo. Sería aún mejor si pudieras crear una respuesta con la solución y compartirla con la comunidad.
    – Marcos
    Commented el 28 may. 2022 a las 11:16

1 respuesta 1

0

buen días.

Veo que estás dandole un margin-top, pero en la transición le aplicas top de 0.2 segundos, recuerda que son 2 propiedades diferentes. podrías cambiar el margin-top por top. con eso la transición trabajaría bien.

1
  • Siguiendo el mensaje anterior al tuyo el simbolo del selector de hermanos "~" no "conectaba" porque estaba en un div aparte, los puse en el mismo div con la clase "menu_img". Asi id="despleg_menu" queda como hermano de <nav class="nav_menu">. Se me rompiò la estructura del grid al final pero lo reposicionè con un position:absolute; y las medidas correspondientes para que quede en el mismo lugar. Y asi si, el selector hnos funciona. También probé con top pero el problema sigue siendo que el selector hnor, al estar en div´s separados quedan como primos y no hnos.
    – Vic ED
    Commented el 28 may. 2022 a las 2:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.