Multi-Level Accordion Menu 멀티레벨 아코디언 메뉴 세로메뉴

Multi-Level Accordion Menu

multi-level-accordion-menu.zip

https://codyhouse.co/gem/css-multi-level-accordion-menu/

그룹 / 하위 항목을 지원하는 편리한 아코디언 메뉴입니다. checkboxes 입력 요소에 : checked checked-class selector를 사용하여 CSS에서만 작동합니다. 그러나 인스턴트 기본 효과와 비교하여 미묘한 애니메이션을 선호하는 경우에 대비하여 jQuery 버전도 포함 시켰습니다.

구조 만들기

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로만 표시하는 스마트 한 기술을 사용합니다. 체크 박스 입력 요소를 포함하여 : checked 의사 클래스와 인접한 형제 선택기 (div + div)를 다음과 같이 사용할 수 있습니다. sub <ul> 요소의 표시 모드를 "none"에서 "block"으로 변경하십시오.

단계별 설명 : 먼저 체크 박스 입력 요소가 하위 항목을 포함하는 전체 목록 항목을 포함하는지 확인해야합니다. 다시 말해, 사용자 정의 확인란을 만들어야합니다. 먼저 레이블을 클릭 할 때 확인란의 선택 / 선택 해제 여부를 확인해야합니다. 이것은 레이블 ( "for"속성 = "name"및 "id"속성 레이블)에있는 "for"속성을 사용하여 수행됩니다 (위의 html 섹션 참조). 이렇게하면 입력 요소를 숨기고 대신 레이블로 작업 할 수 있습니다.

.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;

}

이제 HTML 구조에서 입력, 레이블 및 정렬되지 않은 목록 (클릭 할 때 보이게 함)이 을 주목하십시오. 

: checked pseudo-class를 사용하면 다음과 같은 프로세스를 동작시킬 수 있습니다 

: 체크 박스 입력이 체크되었을 때 (레이블을 클릭), <ul> 형제 엘리먼트를 가져 와서 그 값을 "none"에서 "block"으로 변경하십시오 ":

.cd-accordion-menu ul {

/* by default hide all sub menus */

display: none;

}

 

.cd-accordion-menu input[type=checkbox]:checked + label + ul,

.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {

/* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/

/* show children when item is checked */

display: block;

}

시작 단계를 부드럽게 애니메이트하려면 .js 파일도 포함하십시오. .animate 클래스를 주 .cd-accordion-menu 요소에 추가하는 것을 잊지 마십시오 (화살표 회전을 움직입니다).