반응형
Notice
Recent Posts
Recent Comments
Link
250x250
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- Hover
- input
- scrollY
- JavaScript
- forEach
- swiperjs
- React
- 애니메이션
- Animation
- Sticky
- scroll
- pointermove
- SQLD
- getBoundingClientRect
- scrollevent
- css
- classList
- mousemove
- 반복문
- localstorage
- 가로스크롤
- swiper
- insertAdjacentHTML
- For
- 스크롤
- 반응형
- NodeList
- html
- 이벤트리스너
- addEventListener
Archives
- Today
- Total
목록2024/02/03 (1)
ZeroToHunnit Coding
[Javascript] 아코디언 메뉴 만들기
아주 간단하게 아코디언 메뉴를 만들 수 있다. 저는 이렇게 아코디언 메뉴와 함께 해당 사진도 옆에서 나오게하는 애니메이션을 만들어 보았다. HTML 1번 사진입니다. 2번 사진입니다. 3번 사진입니다. 4번 사진입니다. 5번 사진입니다. 리스트 1번입니다. 리스트 1번 내용입니다. 리스트 2번입니다. 리스트 1번 내용입니다. 리스트 3번입니다. 리스트 3번 내용입니다. 리스트 4번입니다. 리스트 4번 내용입니다. 리스트 5번입니다. 리스트 5번 내용입니다. aco-list안에 content를 넣어준다. CSS .section{ padding: 0 120px; } .inner{ width: 100%; display: flex; justify-content: space-between; } .photo-box..
JAVASCRIPT
2024. 2. 3. 17:33