Menú en HTML CSS y Javascript fullscreen

DISEÑO Y MAQUETACIÓN DE UN MENU ANIMADO MINIMALISTA FULLSCREEN EN HTML + CSS + JS MINIMALISTA CON LOS COLORES 2021 Ultimate Gray + Illuminating

Video Menú animado con HTML CSS JS
SUSCRÍBETE A NUESTRO CANAL SÍGUENOS EN FACEBOOK

¿Cómo diseñar un Menú animado 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"
            })
        })

 

¿Quieres descargar el código fuente Menú en HTML CSS y Javascript fullscreen?
...por favor suscríbete gratuitamente para descargarlo

CSS HTML Javascript

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 328 veces | Publicado hace 4 meses

Curso Diseño Web Responsive con Bootstrap 4.5

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021