Word Cracker의 잡다한 정보 모음

HTML/CSS로 작동하는 아코디언 메뉴

0

제목을 클릭하면 내용이 펼쳐지고 다시 클릭하면 축소되는 기능을 아코디언(혹은 토글)이라고 합니다. 이러한 기능은 사이드바 메뉴, FAQ 등 다양하게 응용이 가능합니다. 참고로 아바다 테마에서는 “토글은 한 번에 여러 개 항목을 펼칠 수 있지만 아코디언은 한 번에 하나만 펼쳐지는 것”을 지칭합니다.

워드프레스에서는 아바다나 Divi와 같은 테마에서 아코디언 숏코드를 제공하여 비교적 쉽게 아코디언(토글) 기능을 구현할 수 있습니다.

개인적으로 Visual Composer를 별로 좋아하지 않지만 비주얼 컴포저와 같은 페이지 빌더가 사용되는 경우 아코디언 요소(엘리먼트)를 사용할 수 있습니다. 아래 그림은 더세븐(The7) 테마에 포함된 비주얼 컴포저에서 제공하는 Accordion 요소를 보여줍니다.

테마에서 아코디언이나 토글 기능을 제공하지 않는 경우 플러그인을 사용하는 것도 가능합니다. Accordion으로 검색해보면 다양한 플러그인이 검색됩니다. 그 중에서 적절한 것으로 선택할 수 있습니다. (Accordion이라는 이름의 플러그인이 2만 개 이상 사이트에 설치되어 사용하고 있고 평가도 좋은 편입니다.)

플러그인 사용이 꺼려지는 경우 jQuery를 사용하는 것도 가능합니다.

순수한 HTML/CSS로 아코디언 메뉴 구현하기

jQuery나 플러그인은 사이트 속도에 영향을 미칠 수 있습니다. 속도가 염려가 된다면 순수한 HTML/CSS로 아코디언 메뉴를 구현하는 것도 가능합니다. 아래 글에서 다양한 아코디언 메뉴를 HTML/CSS만을 사용하여 구현하는 코드를 제공합니다.

예시:

Related Posts

댓글 남기기

이메일은 공개되지 않습니다.