Created
February 1, 2020 16:52
-
-
Save fernastereo/6040b898d4e9ed05d393b0517e1b4360 to your computer and use it in GitHub Desktop.
Responsive Nav Bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const navSlide = () => { | |
const burguer = document.querySelector('.burguer'); | |
const nav = document.querySelector('.nav-links'); | |
const navLinks = document.querySelectorAll('.nav-links li'); | |
//Toggle Nav | |
burguer.addEventListener('click', () => { | |
nav.classList.toggle('nav-active'); | |
//Animate Links | |
navLinks.forEach((link, index) => { | |
if(link.style.animation){ | |
link.style.animation = ''; | |
}else{ | |
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`; | |
} | |
}); | |
//Burguer animation | |
burguer.classList.toggle('toggle'); | |
}); | |
} | |
navSlide(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title></title> | |
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> | |
<link rel="stylesheet" href="./css/style.css"> | |
</head> | |
<body> | |
<nav> | |
<div class="logo"> | |
<h4>Nav</h4> | |
</div> | |
<ul class="nav-links"> | |
<li><a href="">Home</a></li> | |
<li><a href="">Nosotros</a></li> | |
<li><a href="">Servicios</a></li> | |
<li><a href="">Documentos</a></li> | |
<li><a href="">Contacto</a></li> | |
</ul> | |
<div class="burguer"> | |
<div class="line1"></div> | |
<div class="line2"></div> | |
<div class="line3"></div> | |
</div> | |
</nav> | |
<script src="./js/app.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
margin: 0px; | |
padding: 0px; | |
box-sizing: border-box; | |
} | |
body { | |
font-family: 'Poppins', sans-serif; | |
} | |
nav{ | |
display: flex; | |
justify-content: space-around; | |
align-items: center; | |
min-height: 8vh; | |
background: rgb(241, 241, 241); | |
} | |
.nav-links{ | |
display: flex; | |
justify-content: space-around; | |
width: 45%; | |
} | |
.nav-links li{ | |
list-style: none; | |
} | |
.nav-links a{ | |
color: black; | |
text-decoration: none; | |
letter-spacing: 3px; | |
font-weight: bold; | |
font-size: 12px; | |
} | |
.burguer{ | |
display: none; | |
} | |
.burguer div{ | |
width: 25px; | |
height: 3px; | |
background-color: black; | |
margin: 5px; | |
transition: all 0.3s ease; | |
} | |
@media screen and (max-width: 1024px){ | |
.nav-links{ | |
width: 55%; | |
} | |
} | |
@media screen and (max-width: 768px){ | |
body{ | |
overflow-x: hidden; | |
} | |
.nav-links{ | |
position: absolute; | |
right: 0px; | |
height: 92vh; | |
top: 8vh; | |
background-color: rgb(241, 241, 241); | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
width: 100%; | |
transform: translateX(100%); | |
transition: transform 0.5s ease-in; | |
} | |
.nav-links li{ | |
opacity: 0; | |
} | |
.burguer{ | |
display: block; | |
cursor: pointer; | |
} | |
} | |
.nav-active{ | |
transform: translateX(0%); | |
} | |
@keyframes navLinkFade{ | |
from{ | |
opacity: 0; | |
transform: translateX(50px); | |
} | |
to{ | |
opacity: 1; | |
transform: translateX(0px); | |
} | |
} | |
.toggle .line1{ | |
transform: rotate(-45deg) translate(-5px, 6px); | |
} | |
.toggle .line2{ | |
opacity: 0; | |
} | |
.toggle .line3{ | |
transform: rotate(45deg) translate(-5px, -6px); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment