목록애니메이션 (1)

코딩짜는 일상

[Javascript & jQuery] 애니메이션 메뉴 접기/펴기(collapse) - 아코디언 메뉴

메뉴의 서브메뉴를 숨겼다 펼치거나 특정 목차의 컨텐츠 내용을 접었다 펼칠 때 주로 collapse 또는 아코디언을 검색합니다. 찾아보시면 여러가지 방법을 소개하고 있지만 일단 이 글에선 Javascript와 jQuery를 쓰는 방식을 비교해보고자 합니다. 먼저 HTML은 다음과 같습니다. HTML main 1 sub 1 sub 2 sub 3 Javascript 먼저 자바스크립트 입니다. 서브 메뉴의 max-height를 0으로 만들거나 원래 높이로 되돌리는 방식으로 접었다 폈다 하는 컨셉입니다. sub 클래스 스타일에 transition을 추가해주지 않으면 애니메이션 없이 팟 나타났다가 팟 사라집니다. 주의!! jQuery 마지막으로 제이쿼리 입니다. 자바스크립트보다 코드가 훨씬 짧아졌습니다! 서브 메뉴..
IT/Javascript&Jquery 2022. 9. 29. 17:34
이전 Prev 1 Next 다음