30 diciembre, 2020

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

Suscríbete a nuestro canal en Youtube

Suscríbirse

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 4895 veces | 3 usuarios

Descarga del código fuente HTML + CSS de Menú en HTML CSS y Javascript fullscreen

148 descargas

Para descargar el código crea una cuenta

Crear cuenta

Compartir link del tutorial con tus amigos


Curso de HTML

USD 0.00

Descarga del código fuente

Curso de HTML
Diseño Web con HTML & CSS

USD 10.00

Descarga del código fuente

Diseño Web con HTML & CSS

Más tutoriales de HTML + CSS

Codea Applications

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

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2025