반응형
250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 확장성
- 이벤트리스너
- Sticky
- 스크롤
- scroll
- getBoundingClientRect
- 반복문
- css
- swiper
- scrollevent
- React
- swiperjs
- Hover
- Animation
- insertAdjacentHTML
- NodeList
- For
- 애니메이션
- width
- NAV
- localstorage
- scrollY
- forEach
- JavaScript
- classList
- addEventListener
- input
- mousemove
- html
- pointermove
Archives
- Today
- Total
ZeroToHunnit Coding
[Javascript] 아코디언 메뉴 만들기 본문
728x90
반응형
아주 간단하게 아코디언 메뉴를 만들 수 있다. 저는 이렇게 아코디언 메뉴와 함께 해당 사진도 옆에서 나오게하는 애니메이션을 만들어 보았다.
HTML
<div class="section">
<div class="inner">
<div class="photo-box">
<div class="photo photo-active">
<p>1번 사진입니다.</p>
</div>
<div class="photo">
<p>2번 사진입니다.</p>
</div>
<div class="photo">
<p>3번 사진입니다.</p>
</div>
<div class="photo">
<p>4번 사진입니다.</p>
</div>
<div class="photo">
<p>5번 사진입니다.</p>
</div>
</div>
<ul class="aco-box">
<li class="aco-list">
<p>리스트 1번입니다.</p>
<div class="content content-on">
<p>리스트 1번 내용입니다.</p>
</div>
</li>
<li class="aco-list">
<p>리스트 2번입니다.</p>
<div class="content">
<p>리스트 1번 내용입니다.</p>
</div>
</li>
<li class="aco-list">
<p>리스트 3번입니다.</p>
<div class="content">
<p>리스트 3번 내용입니다.</p>
</div>
</li>
<li class="aco-list">
<p>리스트 4번입니다.</p>
<div class="content">
<p>리스트 4번 내용입니다.</p>
</div>
</li>
<li class="aco-list">
<p>리스트 5번입니다.</p>
<div class="content">
<p>리스트 5번 내용입니다.</p>
</div>
</li>
</ul>
</div>
</div>
aco-list안에 content를 넣어준다.
CSS
.section{
padding: 0 120px;
}
.inner{
width: 100%;
display: flex;
justify-content: space-between;
}
.photo-box{
width: 500px;
height: 800px;
position: relative;
}
.photo{
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
left: -500px;
transition: left 0.6s;
}
.photo-active{
left: 0px;
}
.photo:nth-child(1){
background-color: aqua;
}
.photo:nth-child(2){
background-color:blueviolet;
}
.photo:nth-child(3){
background-color:chartreuse;
}
.photo:nth-child(4){
background-color:cornflowerblue;
}
.photo:nth-child(5){
background-color:gold;
}
.aco-box{
width: 600px;
border-top: 3px solid black;
}
.aco-list{
width: 100%;
padding: 40px;
font-size: 40px;
cursor: pointer;
border-bottom: 3px solid black;
}
.content{
height: 0;
transition: all 0.6s;
visibility: hidden;
}
.content-on{
padding-top: 100px;
visibility: visible;
height: 54px;
}
photo-active와 content-on이라는 사진과 내용을 활성화시켜주는 클래스를 미리 만들어주고 탈부착하는 방식으로 만들 것이다.
JAVASCRIPT
for(let i = 0; i < document.querySelectorAll('.photo').length; i++){
document.querySelectorAll('.aco-list')[i].addEventListener('click',()=>{
document.querySelectorAll('.photo').forEach(e=>{
e.classList.remove('photo-active');
});
document.querySelectorAll('.content').forEach(e=>{
e.classList.remove('content-on');
});
document.querySelectorAll('.photo')[i].classList.add('photo-active');
document.querySelectorAll('.content')[i].classList.add('content-on');
});
}
for반복문을 이용하여 각 리스트를 클릭했을 때 번호에 맞는 내용과 사진이 나오게 클래스를 부여해주었다. 클래스를 부여하기 전에 모든 활성화 클래스들을 지워주고 부여해야 잘 작동한다.
클래스를 지워주는 코드를 보면 forEach 반복문들 사용하는 것을 볼 수 있는데 querySelectorAll을 검사해보면 nodelist라는 array자료로 나오기 때문에 바로 클래스를 제거하는 코드를 붙이면 오류가 난다. 따라서 forEach 반복문으로 파라미터를 뚫어서 클래스를 지워준다. 파라미터는 array자료의 요소들을 가리킨다.
728x90
반응형
'JAVASCRIPT' 카테고리의 다른 글
[Javascript] 가로 스크롤 시 해당 섹션의 제목 고정 (2) | 2024.02.07 |
---|---|
[Javascript] 마우스 따라 움직이는 ui (0) | 2024.02.05 |
[Javascript] 스크롤 내리면 사라지고 스크롤 올리면 나타나는 navbar (0) | 2024.02.01 |
[Javascript] 마우스따라 움직이는 bar (2) | 2024.01.30 |
[Javascript] 데이터로 책 리스트 보여주기 (2) | 2024.01.26 |