30 diciembre, 2020
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íbirseHola, 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:
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
148 descargas
Para descargar el código crea una cuenta
Crear cuenta© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2025