Menú en HTML CSS y Javascript fullscreen

Hola, bienvenido a un nuevo tutorial de programación con Javascript, maquetación con html y diseño con css. Dónde vamos a diseñar un menú de navegación para una página web web, cuyas características son:

Características del menú html + css + js

1. Minismalista lo que hoy en dia se busca
2. Con los colores 2021 Ultimate Gray + Illuminating o al menos sus equivalentes en CMYK
3. Con transiciones de desplazamiento  modificando el valor de la regla top
4. Con un deslizador animado que responde a la posición de mouse detectado por el evento mouseover sobre los items del menú.

Veamos el código del menú:

HTML

    <div class="header">
        <div class="logo">
            <h1>CODEA.APP</h1>
        </div>
        <div class="_btnopen">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="_top">
        <div class="_sombra"></div>
        <div class="_menu">
            <div class="_btncerrar">X</div>
            <ul>
                <li><a href="">Inicio</a></li>
                <li><a href="">Nosotros</a></li>
                <li><a href="">Servicios</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Contacto</a></li>
                <div id="indicador"></div>
            </ul>
        </div>
    </div>
    <div class="contenido">
        <h1>MENÚ MINIMALISTA FULLSCREEN<br>
        HTML + CSS + JS</h1>
    </div>

CSS

        body{margin: 0;font-family: 'Montserrat', sans-serif; background: #97999B;}
        .header{
            display: flex;
            background: #F5DF4D;
            justify-content: space-evenly;
            align-items: center;
        }
        .header .logo{ color:black; width: 90%; padding: 20px; }
        .header ._btnopen{  
            width: 10%; 
            display: grid;
            place-items: center;
            height: 30px;
            cursor: pointer;
        }
        ._btnopen>span{
            background: black; 
            display: block;
            height: 3px; 
            width: 30px; 
        }
        ._top{
            position: absolute;
            width: 100%;
            height: 100vh;
            top: 0;
            left: 0;
            display: flex;
            animation: animacion_out 0.1s forwards;
        }
        @keyframes animacion_in {
            0%{ transform: translateY(-100%); }
            100%{transform: translateY(0%);}
        }
        @keyframes animacion_out {
            0%{ transform: translateY(0%); }
            100%{transform: translateY(-100%);}
        }
        ._sombra{
            background: #97999B99;
            width: 50%;}
        ._menu{
            width: 50%;
            position: relative;
            background: #F5DF4D;
            display: grid;
        }
        ._menu ul li{
            list-style: none;
        }
        ._menu ul li a{ color: black; text-decoration: none; line-height: 50px; font-size: 30px;font-family: 'Montserrat', sans-serif;
}
        ._btncerrar{color: black; cursor: pointer; text-align: right; padding: 20px; font-size: 30px;}
        ._menu #indicador{
            position: absolute;
            background: crimson;
            height: 2px;
            top: -2px;
            width: 0;
            transition: 0.5s;
            border-radius: 2px;   
            }
        .contenido{
            display: grid;
            place-items: center;
            height: 80vh;
            text-align: center;
        }

JAVASCRIPT

let _btncerrar = document.querySelector("._btncerrar");
        let _btnopen = document.querySelector("._btnopen");
        const _top = document.querySelector("._top")
        _btncerrar.addEventListener("click",(e)=>{
            _top.style.animation = "animacion_out 0.5s forwards"
        })
        _btnopen.addEventListener("click",(e)=>{
            _top.style.animation = "animacion_in 0.5s forwards"
        })

        let indicador = document.querySelector("#indicador")
        let menu = document.querySelectorAll("._menu ul li a")
        menu.forEach( item =>{
            item.addEventListener("mouseover",(e)=>{
                
                indicador.style.top     = item.offsetTop+40+"px"
                indicador.style.width   = item.offsetWidth+"px"
            })
        })

Leido 4213 veces