반응형
구현
먼저 HTML에 메뉴버튼과 메뉴를 생성합니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
<!-- custom style -->
<link rel="stylesheet" href="main.css" />
<script defer src="index.js"></script>
</head>
<body>
<div class="menu-box">
<i class="close-btn fas fa-times fa-3x"></i>
<i class="open-btn fas fa-bars fa-3x"></i>
</div>
<div class="side-menu-box">
<p>Menu 1</p>
<p>Menu 2</p>
<p>Menu 3</p>
</div>
</body>
</html>CSS를 활용하여 기본 스타일을 적용하고 메뉴버튼과 메뉴의 위치를 조정합니다.
/* main.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
font-family: 'Poppins';
overflow-x: hidden;
}
.menu-box {
height: 200px;
width: 200px;
position: fixed;
top: -100px;
left: -100px;
background-color: aquamarine;
border-radius: 50%;
transition: .4s ease;
z-index: 2;
}
/* turning */
body.show .menu-box {
transform: rotate(-85deg);
}
.menu-box .fas {
position: absolute;
cursor: pointer;
}
.close-btn {
top: 60% !important;
left: 40px !important;
transform: rotate(-5deg);
}
.open-btn {
top: 60% !important;
left: 120px !important;
}
.menu-box .fas {
position: absolute;
top: 50%;
left: 50%;
}
/* turning */
.side-menu-box {
height: 200px;
width: 300px;
font-size: 2rem;
position: fixed;
bottom: 0;
transition: .4s ease;
}
.side-menu-box p {
color: aliceblue;
transform: translateX(-200px);
transition: .6s cubic-bezier(0.075, 0.82, 0.165, 1);
}마지막으로 자바스크립트에서 각 메뉴에 시간차로 스타일을 지정해 주면 완성됩니다.
// index.js
const menuBox = document.querySelector('.menu-box')
const contentBox = document.querySelector('.content-box')
const closeBtn = document.querySelector('.close-btn')
const openBtn = document.querySelector('.open-btn')
const menus = document.querySelectorAll('.side-menu-box p')
openBtn.addEventListener('click', () => {
document.body.classList.add('show')
menus.forEach((menu, idx) => {
menu.style.transform = `translateX(${30 * idx}px)`
})
})
closeBtn.addEventListener('click', () => {
document.body.classList.remove('show')
menus.forEach((menu, idx) => {
menu.style.transform = 'translateX(-200px)'
})
})이상으로 바닐라 자바스크립트를 활용하여 컴포넌트를 만들어 보았습니다.
728x90
반응형
'프론트엔드 > 자바스크립트' 카테고리의 다른 글
| 라이브러리 - RxJS (0) | 2023.02.15 |
|---|---|
| 자바스크립트 컴포넌트 - 확장 검색 창 (6) | 2023.02.14 |
| 엔피엠 (0) | 2023.02.01 |
| 자바스크립트 컴포넌트 - 스탭퍼 (0) | 2023.02.01 |
| 자바스크립트 컴포넌트 - 고무고무 카드 (0) | 2023.01.28 |
