Help with Header effects

Question

Hello, I would like to know how I can make this effect of "drawer", as it is on this site : https://warrenbrasil.com/app/#/suitability

Notice that it appears with height and width 100% after decreasing to the normal size of a header, I do not know how to do this only with CSS, I believe it has JS together.

I wish it wasn’t an onclick Event for example, and did auto, like it’s there

Answer 1

I don’t know if this is exactly the way this example was done, but only with CSS is it perfectly possible to get the same result.

There are other ways to do it, but the one I found easier was to put at the end of your code a div with positon:absolute and a z-index self to ensure that you will not be behind anything, then with the property aimation and the @keyframes you do the animation, in case I did a 1 second animation that starts with a delay of 0.5 seconds and only repeats once (forwards)

See how the result turned out:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    background-color: blue;
    color: #fff;
    height: 50px;
    line-height: 50px;
    font-family: sans-serif;
}
.efeito {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 100px;
    font-weight: bold;
    color: #fff;
    animation: anima 1s linear 500ms forwards;
}
@keyframes anima {
    to {
        top: -100vh;
    }
}

<header>
    menu nav
</header>
<section>
    conteúdo site<br>
    <input type="text" name="" id=""><br>
    <button>button</button>
</section>

<div class="efeito">
    Texto Intro
</div>