Menú en HTML CSS y Javascript fullscreen

¿Cómo diseñar un Menú animado en HTML+ CSS y Javascript fullscreen?

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

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 83 veces | Publicado hace 3 semanas

Curso Diseño Web 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