[JS] 반응형 네비게이션 바 만들기
2020. 6. 16. 21:12ㆍJavascript/응용
1. 완성본
2. HTML
HTML 구조는 크게 어려운 것이 없다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NAVIGATION</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Projects</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
3. CSS
내가 어렵다고 생각한 것은 주석을 달아놨다. 엄청나게 어려운 것은 없다.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
/* 요소의 최소 너비 지정, height 속성 무시
vh단위는 브라우저 안쪽 높이(window.innerHeight)을 기준으로
설정된다. 하지만 태블릿이나, 모바일의 경우에는 뷰 포트에 따라
맞춰짐*/
min-height: 8vh;
background-color: #504954;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
/* 각 글자 2px씩 간격을 줌*/
letter-spacing: 2px;
font-size: 18px;
}
.nav-links {
width: 40%;
display: flex;
justify-content: space-around;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
top: 8vh;
right: 0;
height: 92vh;
background-color: #504954;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
.nav-active {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(5px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
4. 자바스크립트
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navlinks = document.querySelectorAll(".nav-links li");
const navAnimation = () => {
navlinks.forEach((link, index) => {
// 애니메이션이 있을 때
if (link.style.animation) {
// 애니메이션 비움
link.style.animation = "";
} else {
// 애니메이션 없을 때 애니메이션을 추가
// 딜레이 간격을 줘서 li가 하나씩 차례대로 나타나도록 설정
link.style.animation = `navLinkFade 0.5s ease forwards ${
index / 7 + 0.5
}s`;
}
});
};
const handleNav = () => {
nav.classList.toggle("nav-active");
//nav Animation
navAnimation();
//burger Animation
burger.classList.toggle("toggle");
};
const navSlide = () => {
burger.addEventListener("click", handleNav);
};
const setNavTransition = (width) => {
if (width > 768) {
nav.style.transition = "";
} else {
nav.style.transition = "transform 0.5s ease-in";
}
};
const handleResize = () => {
const width = event.target.innerWidth;
setNavTransition(width);
};
const init = () => {
// Toggle Nav
window.addEventListener("resize", handleResize);
navSlide();
};
init();
5. 후기
내가 따로 만든 것은 아니다. 서양 형의 유튜브를 보고 따라 만든 것 뿐.. 보면서 이렇게도 짤 수 있구나라는 것을 느꼈다.
나중에 포토폴리오나 프론트앤드를 구성할 때 응용하면 굉장히 좋을 것 같다.
6. 참고자료
Dev Ed - Responsive Navigation Bar Tutorial | HTML CSS JAVASCRIPT(YOUTUBE)
'Javascript > 응용' 카테고리의 다른 글
| [JS] 마우스 Drog & Drop을 이용하여 박스를 이동시켜보자. (0) | 2021.01.04 |
|---|---|
| [NOJS] 3D 캐러셀 슬라이드 만들기 (0) | 2020.12.13 |
| [JS] 계산기 만들기 (0) | 2020.06.14 |
| [JS] 자바스크립트로 아날로그 시계 만들기 (0) | 2020.06.07 |
| #2 마우스오버 이벤트를 이용하여 메뉴 슬라이더를 만들어보자. (0) | 2020.05.14 |