728x90
1. summary
- 기능
- transition : action이 일어나는 시간
- translateY : 세로로 내려감
- rotate : 중심점을 기준으로 회전
- display : 형태(block, inline)를 설정
- cursor : 해당 tag에 접근시 커서 변경
- toggle : event 발생시, 기존 class 유지한 후 class 존재하면 제거, 없으면 생성
- 출처 : https://www.w3schools.com/howto/howto_css_menu_icon.asp
2. 적용 이미지
3. 코드
- 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>Menu icon</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script src="app.js"></script>
</body>
</html>
- css
.container {
/* display : block으로 할 것인지 inline으로 할 것인지 정해줌 */
display: flexbox;
/* cursor : 해당 div에 접근시 커서 변경 */
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
/* transition : action이 일어나는 시간 */
transition: 1s;
}
.change .bar1 {
/* 어떻게 작동되는지 헷갈리면 translate, rotate 따로 따로 작동시켜보기 */
/* translateY : 세로로 내려감 */
/* rotate : div 중심점을 기준으로 회전 */
transform: translateY(11px) rotate(45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translateY(-11px) rotate(-45deg);
}
- js
const menu = document.querySelector(".container");
function myFunction(x) {
// 기존의 class를 유지한 채로 class를 추가 및 삭제
menu.classList.toggle("change");
}
menu.addEventListener("click", myFunction);