웹솔루션개발 25년 노하우! 해피CGI의 모든것

ACL은 계층 적 JSON 데이터에서 접을 수있는 트리 구조를 생성하는 가볍고 사용하기 쉬운 jQuery 트리보기 플러그인입니다. 각 맨 위 트리 항목에는 아코디언처럼 확장 및 축소할 수 있는 하위 항목이 포함되어 있어 사용자에게 시각적 일관성을 제공하여 트리 구조의 수준 사이를 쉽게 탐색할 수 있습니다. 폴더 (디렉토리) 트리와 수직 아코디언 메뉴에 적합합니다. 다운로드 받은 파일의 압축을 해제한 뒤 src/index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 위 그림과 같은 화면이 표시되고, 각각의 메뉴를 클릭을 하면 하위 메뉴가 펼쳐지는 아코디언 메뉴입니다. 사용법은 아래와 같습니다.

자바스크립트를 이용한 심플한 아코디언 메뉴입니다. 첨부된 파일내에 index.html 파일과 css파일에서 관련 코드를 확인하실 수 있습니다. 아래의 링크를 통해서도 확인이 가능하니 참고하세요~ https://codepen.io/SoufianeAbid/pen/eZVzBL

클릭하면 해당 메뉴의 레이어가 열리고 열려있던 레이어는 닫히는 아코디언 메뉴입니다. 레이어가 레디자인 컨텐츠를 포함이 가능합니다. 사이트에서 로그인하시면 해당 메뉴 소스를 다운로드 받으실수 있습니다. 열려있던 메뉴를 한번더 클릭하면 완전히 닫혀있는 메뉴가 됩니다. 간단한 소스로 부드럽게 작동하는 아코디언 메뉴를 만들고 응용하기 쉽습니다. 익스플로어 10버전 이상 브라우저, 크롬 브라우저에서 작동합니다.