순수 CSS로 축소 가능한 트리 메뉴를 만드는 방법 알아보기

CSS3가 출시되면서 해외 연구가 본격화되고 있지만, 중국에서는 여전히 IE가 CSS3을 지원하지 않는다는 생각을 갖고 무관심하고, 배우기를 거부합니다. 그러나 역사는 좋은 일이 승리할 것이며 결국 CSS3가 CSS2를 대체할 것이라고 말해줍니다. CSS3로 만든 축소 가능한 트리 메뉴를 여러분과 공유하겠습니다.

트리 메뉴는 다들 익숙하실 거라 생각합니다. 우리는 보통 CSS+JS를 사용하여 구현합니다. CSS3의 등장으로 JS의 제약을 없애고 CSS3의 "선택기"를 직접 사용하여 축소 가능한 트리 메뉴를 실현할 수 있습니다.

전체적인 코드가 많아서 한 문장씩 다루지는 않겠습니다. 제가 중요하다고 생각하는 부분만 언급하겠습니다.

HTML 코드:

하위 🎜>

1. 하위< ;/ li>
   
2. 
   하위
   
   < ;ol>
   
3. 무제한 레벨


4. 무한 레벨< ;/a>


5. 무한 레벨


6. 무제한 레벨


7. 무한 레벨


8. 무제한

< ;/ol>


구현 아이디어는 체크박스의 체크된 값을 사용하여 하위 열이 확장되었는지 여부를 결정하는 것입니다. CSS3 선택기는 의사 클래스를 제공합니다. 이 의사 클래스는 다음과 같은 기능을 제공합니다. 요소에 체크된 값이 있으면 CSS를 실행하세요. (매우 강력하죠? CSS3를 사용하면 JS 작성이 훨씬 줄어듭니다!)

subordinate


체크박스에 체크된 값이 있으면 OL을 구현하여 원하는 기능을 구현하게 해주세요.


CSS 코드를 살펴보겠습니다.
li 입력 {
position:absolute;left:0;margin-left : 0;불투명도:0;z-색인:2;커서:포인터;높이:1em;너비:1em;상단:0;
}
입력 + ol {
디스플레이:없음;
}
입력 + ol > li {
height:0;overflow:hidden;margin-left:-14px!important;padding-left:1px;
}
li 라벨 {
커서 :pointer;display:block;padding-left:17px;배경:url(toggle-small-expand.png) 반복 없음 0px 1px;
}
input:checked + ol {
배경: url(toggle-small.png) 44px 5px no-repeat;margin:-22px 0 0 -44px;padding:27px 0 0 80px;height:auto;display:block;
}
input:checked + ol > ; li {
height:auto;
}

이 코드는 트리 메뉴의 중심입니다:

input:checked + ol {
background: url( 전환 -small.png) 44px 5px no-repeat;margin: -22px 0 0 -44px;padding:27px 0 0 80px;height: auto;display: block;
}

이것은 inoput에 관한 것입니다. 확인해 보니 OL 소유의 스타일과 동일합니다.

IE9 이하의 브라우저를 사용하시는 경우에는 열람하실 필요가 없습니다.

(IE6+ 브라우저에서 지원하도록 만드는 것도 가능하지만 CSS3 속성을 시뮬레이션하려면 JS를 추가해야 합니다. 해외에는 IE6+ 브라우저가 PIE와 같은 일부 CSS3를 지원하도록 JS를 작성한 재능 있는 사람들이 많이 있습니다. .)

요약:

일반적으로 구현 아이디어는 매우 간단하며 주로 CSS3의 검사 의사 클래스를 사용하여 OL의 숨겨진 표시를 구현합니다. 아쉽게도 IE 브라우저는 CSS3를 지원하지 않지만, IE가 CSS3를 지원하지 않는다고 해서 CSS3에 대한 연구를 포기할 수는 없습니다. CSS3와 HTML5는 모두 해외 프론트엔드에서 매우 뜨거운 이슈입니다. 이들의 연구는 우리보다 훨씬 앞서 있지만, 중국에서는 아직 실제로 시도해 보는 사람이 많지 않다는 점은 프론트엔드 개발자에게 매우 안타까운 일입니다. 나는 CSS3가 우리의 관심을 끌고 출발선에서 지지 않도록 해야 한다고 생각합니다. CSS3 개발을 촉진하기 위해 모두 함께 노력합시다.