Leonidas, hace días que quiero pero no lo estoy logrando, quiero hacer un grid con menú hamburguesa el cual se oculte y cambie el grid ...

Lucio Flores

Pregunta

student•hace 7 años

pero el reto es que el mismo cuente con animación o transición de 300ms o 400ms. Se puede hacer con css grid o vuelvo a flex?

Juan David Avila Caycedo

student•hace 7 años

Hay una solución utilizando checkbox el cual tiene que estar antes header antes del menú antes de todos pero al mismo nivel ejemplo.

checkbox

Header

Main

Footer

Con esa disposición en el html lo que concierne es que hagas lo siguiente:decidi hacerlo a escribirlo por que me demorará mucho escribiéndole y para eso pues mejor lo hago y que juegues a descubrir que hice y como lo hice cualquier cosa pregúntame y te explico.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
       
*
{
    box-sizing:border-box;
}
body
{
text-align:center;
padding:0px;
margin:0px;
height:100vh;
    display:grid;
    grid-template:repeat(3, 1fr)/repeat(4, 1fr);
}

input
{
    display:none;
}

header
{
    border: solid red;
    grid-row:1/1;
    grid-column:1/-1;
}

nav
{
    border: solid blue;
    display:none;
    animation: mostrar 300ms forwards;
}
main
{
    border: solid violet;
    grid-row:2/2;
    grid-column:1/-1;
}
footer
{
    border: solid black;
    grid-row:3/3;
    grid-column:1/-1;
}

input:checked ~ header
{
    grid-column:2/-1;
}

input:checked ~ nav
{
    display:block!important;
    grid-row:1/-1;
    grid-column:1/1;
}
input:checked ~ main
{
    grid-column:2/-1;
}
input:checked ~ footer
{
    grid-column:2/-1;
}



*[icono="menu"]
{
    display:inline-block;
    position:relative;
    font-size:30px;
    background-color:black;
    width:1em;
    height: .2em;
    margin: .6em .4em;
    float:left;
}
*[icono="menu"]:after
{
    content:"";
    position:absolute;
    display:inline-block;
    font-size:30px;
    background-color:black;
    width:1em;
    height: .2em;
    top:-.4em;
    left:0em;
    transition: all 400ms;
}
*[icono="menu"]:before
{
    content:"";
    position:absolute;
    display:inline-block;
    font-size:30px;
    background-color:black;
    width:1em;
    height: .2em;
    bottom:-.4em;
    left:0em;
    transition: all 400ms;
}
input:checked ~ * *[icono="menu"]:after
{
    width:.75em;
    transform: rotateZ(-45deg);
    top: -.2em;
    left:-.2em;
}

input:checked ~ * *[icono="menu"]:before
{
    width:.75em;
    transform: rotateZ(45deg);
    bottom:-.2em;
    left:-.2em;
}

@keyframes mostrar
{
    from
    {
        transform: translateX(-100%);
    }
    to
    {
        transform: translateX(0%);
    }
}
        </style>
    </head>
    <body>
        <input type="checkbox" id="menu"/>
        <header>
        <label for="menu" icono="menu"></label>
        header
        </header>
        <nav>menu</nav>
        <main>contenido</main>
        <footer>footer</footer>
    </body>
</html>

Franklin Gil

student•hace 7 años

Si por lo menos compatieras el codigo que tienes, y explicas mejor tu idea, habra una alta probabilidad de que te puedan ayudar.

ni yo entendi lo que quieres hacer.

Lucio Flores

student•hace 7 años

5 días sin respuesta…

Lucio Flores

student•hace 7 años

Tres días sin respuesta, que increíble platzi!!

Leonidas, hace días que quiero pero no lo estoy logrando, quiero hacer un grid con menú hamburguesa el cual se oculte y cambie el grid ...

Curso de CSS Grid Layout 2017

Curso de CSS Grid Layout 2017