소스 코드가 포함된 Jquery 수직 다단계 아코디언 메뉴 download_jquery

먼저 렌더링을 보여드리겠습니다. 마음에 드셨다면 아래도 계속 읽어주세요.

간단하지만 실용적인 다단계 수직 아코디언 드롭다운 목록 메뉴입니다. 이 다단계 아코디언 메뉴는 CSS를 사용하여 완전히 만들어졌으며 여러 하위 메뉴를 그룹화하여 다단계 메뉴 효과를 만듭니다.

이 다단계 아코디언 메뉴는 체크박스 요소에 :checked 의사 요소를 사용하여 만들어집니다. 멋진 애니메이션 효과가 필요한 경우 플러그인에 제공되는 main.js 파일을 사용할 수 있습니다. 이 파일은 메뉴가 열리고 축소될 때 왼쪽의 작은 화살표에 애니메이션 효과를 제공할 수 있습니다.

효과 시연 소스코드 다운로드

사용방법

HTML 구조

이 다단계 아코디언 메뉴의 HTML 구조는 매우 간단합니다. 전체 아코디언은 순서가 지정되지 않은 목록입니다. 목록 항목에 하위 메뉴가 포함된 경우 input[type=checkbox] 및 레이블을 추가하고 목록 항목에 .has-children 클래스를 추가합니다. 다른 모든 표준 목록 항목은 태그에 포함되어 있습니다.

<ul class="cd-accordion-menu">
 <li class="has-children">
 <input type="checkbox" name ="group-1" id="group-1" checked>
 <label for="group-1">Group 1</label>
 <ul>
 <li class="has-children">
  <input type="checkbox" name ="sub-group-1" id="sub-group-1">
 <label for="sub-group-1">Sub Group 1</label>
 <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
 </ul>
 </li>
 <li><a href="#0">Image</a></li>
 <li><a href="#0">Image</a></li>
 </ul>
 </li>
 <li><a href="#0">Image</a></li>
 <li><a href="#0">Image</a></li>
</ul> <!-- cd-accordion-menu --> 

CSS 스타일

이 다단계 아코디언 메뉴는 CSS만 사용하여 클릭을 감지하고 하위 메뉴를 확장합니다. 사용하는 방법은 체크박스 요소를 통해

요소의 표시 모드를 "none"에서 "block"으로 변경한 다음 :checked 의사 클래스 및 인접한 형제 선택기를 통해 변경하는 것입니다.

먼저 하위 메뉴가 있는 모든 목록 항목에 체크박스 요소가 있는지 확인해야 합니다. label 요소를 클릭하면 실제로 해당 checkbox 요소를 클릭하게 됩니다. 이는 label 요소의 for 속성을 설정하여 수행됩니다. 그런 다음 확인란 요소를 숨기고 레이블 요소로 바꿀 수 있습니다.

.cd-accordion-menu input[type=checkbox] {
 /* hide native checkbox */
 position: absolute;
 opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
 position: relative;
 display: block;
 padding: 18px 18px 18px 64px;
 background: #4d5158;
 box-shadow: inset 0 -1px #555960;
 color: #ffffff;
 font-size: 1.6rem;
}  

자바스크립트

이 아코디언 메뉴에 멋진 애니메이션 효과를 추가해야 한다면 jQuery와 플러그인에서 제공되는 main.js 파일을 사용할 수 있습니다. 동시에 하위 메뉴를 열고 닫을 때 작은 화살표 방향에 애니메이션을 적용하는 ul.cd-accordion-menu 요소에 .animate 클래스를 추가해야 합니다.

위 내용은 이번 글에서 소개한 소스코드 다운로드가 포함된 Jquery 수직 다단계 아코디언 메뉴에 대한 전체 설명입니다. 마음에 드는 친구는 직접 클릭하여 소스 코드를 다운로드할 수 있습니다.