728x90
반응형
자바스크립트 이벤트 마무리 문제(2)
책 : 모던 자바스크립트 프로그래밍의 정석 221페이지 참고
마무리 문제 2
- 이벤트를 활용해 필요에 따라 표시했다가 감추는 메뉴를 만들어 보겠습니다. 메뉴 아이콘을 클릭하면 메뉴가 표시되고, 다시 클릭하면 메뉴가 숨겨지는 예제를 만들 것입니다. 버튼을 클릭할 때마다 변수와 메뉴에 .active 스타일을 토글하는 소스를 작성해 보세요.
길라잡이
- 버튼과 메뉴를 가져와서 각각 변수로 저장합니다.
- 버튼에 click 이벤트가 발생했을 때 실행할 함수를 연결하는데, 이 함수에서는 버튼과 메뉴에 active 클래스 스타일을 토글합니다.
코드 블럭
<!DOCTYPE html>
<html lang="ko">
<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>finalQestion02</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li, ol {
list-style: none;
}
button {
position: fixed;
right: 30px;
top: 30px;
width: 50px;
height: 50px;
font-size: 25px;
background-color: #000;
transition: transform 0.3s ease-in-out;
}
button.active {
transform: translateX(-170px);
}
nav {
position: fixed;
right: 0;
top: 0;
background-color: #000;
color: #fff;
width: 200px;
height: 100vh;
transform:translateX(100%);
transition: transform 0.3s ease-in-out;
}
nav.active {
transform:translateX(0);
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
margin-left: 20px;
padding: 30px 0;
}
nav a {
text-decoration: none;
color: #fff;
}
</style>
</head>
<body>
<button>📋</button>
<nav>
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">Typerscript</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</nav>
<script>
let button = document.querySelector("button");
let nav = document.querySelector("nav");
button.addEventListener("click", () => {
button.classList.toggle("active");
nav.classList.toggle("active");
});
</script>
</body>
</html>
구성
- body 태그에 button 태그와 nav 태그를 입력해주고 nav 태그 안에 목록 태그를 사용해 글을 입력해줍니다.
- style 태그로 이동해서 버튼과 목록을 오른쪽에 고정시키기 위해 각각 position: fixed; 스타일 속성을 입력해줍니다.
- 추가로 각각 알맞는 스타일 속성을 입력해주고 .active로 버튼과 목록을 각각 transform 효과를 입력해줍니다.
- 목록은 처음에 안보이기위해 목록에 스타일을 바로 transform: translasteX(100%)를 줘서 미리 화면 밖에 사라져있게 해줍니다. 그리고 각각 transition을 줘서 이미지가 원활하게 움직이는 효과를 입력해줍니다.
- script 태그로 이동해서 button 태그와 nav 태그를 선택자로 만들어줍니다.
- 버튼을 클릭했을 때 버튼이 옆으로 이동하고 목록이 나오게 하기 위해서 이벤트 메서드인 addEventListener("click")를 사용해서 함수를 입력해서 버튼과 목록에 스타일을 주기 위해 classList를 사용해서 classList.toggle( )를 사용해서 클래스를 추가/삭제를 시켜줍니다.
참고
- 메서드 속성
| 메서드 | 설명 |
| addEventListener("click") | 클릭 했을 때 |
| classList.toggle( ) | 클래스 추가/삭제하기 |
728x90
반응형
