<!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>
<style>
#menu {
/* border: 1px solid black; */
display: flex;
width: 630px;
position: fixed;
top: -100px;
left: 0;
right: 0;
margin: 0 auto;
}
#menu img {
transition: 1s all;
}
/*
#menu img:hover {
transform: translate(0, 90px);
}
*/
</style>
</head>
<body>
<nav id="menu">
<img src="images/rect_icon01.png" alt="">
<img src="images/rect_icon02.png" alt="">
<img src="images/rect_icon03.png" alt="">
<img src="images/rect_icon04.png" alt="">
<img src="images/rect_icon05.png" alt="">
</nav>
<script>
const list = document.querySelectorAll('#menu img');
let old = null; //이전에 눌렀던 메뉴를 저장하기 위해 변수 선언 후 초기값 null
for (let i=0; i<list.length; i++) {
list[i].onclick = function() { 현재 이미지를 클릭하면
이전에 누른 메뉴를 찾아야 함 > 접기 동작을 주기 위해서
if (old != null) { <- 만약 이전에 눌렀던 메뉴가 존재한다면
old.style.transform = 'translate(0, 0)'; //원위치로 돌리기
}
if (event.target == old) { <- 현재 클릭한 메뉴가 이전에 눌렀던 메뉴와 동일한 경우(한 번 누른 걸 다시 누르면)
event.target.style.transform = 'translate(0, 0)'; //현재 메뉴를 원위치
old = null;
} else { <- 현재 클릭한 메뉴가 이전에 눌렀던 메뉴와 다른 경우
//나중에 누른 메뉴를 튀어나오게
event.target.style.transform = 'translate(0, 90px)'; //각자 알아서 event걸려있기 때문에 각자 처리됨
old = event.target; //event.target이 old가 아니면 event 실행 후 old를 event.target으로 바꿔줌
}
};
}
</script>
</body>
</html>
'[HTML | CSS | JavaScript | jQuery] 정리 > JavaScript' 카테고리의 다른 글
| JavaScript - CSS 이미지를 연결시켜서 애니메이션 효과 주기 (0) | 2023.05.08 |
|---|---|
| JavaScript - CSS 체크박스 선택 시 이미지 이동 (0) | 2023.05.08 |
| JavaScript - CSS 상자 돌리기(rotate) (0) | 2023.05.08 |
| JavaScript - CSS element(s)FromPoint() (0) | 2023.05.08 |
| JavaScript - CSS 상자 크기 조절 (0) | 2023.05.08 |