순수 CSS를 사용하여 축소 가능한 트리 메뉴를 만드는 방법에 대한 소개

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

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

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

HTML 코드:

<레이블 for="subsubfolder1">하위
<입력 ID ="subsubfolder1" type="checkbox" />

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


4. 무한 레벨< ;/a>


5. 무한 레벨


6. 무제한 레벨


7. 무한 레벨


8. 무제한

< ;/ol>


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

subordinate


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

다음 CSS 코드를 살펴보겠습니다.

li input {
position:absolute;left:0;margin-left:0;opacity:0;z-index: 2; 커서:포인터;높이:1em;너비:1em;상단:0;
}
입력 + ol {
디스플레이:없음;
}
입력 + ol >
height:0;overflow:hidden;margin-left:-14px!important;padding-left:1px;
}
li label {
cursor: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(toggle-small.png) 44px 5px no-repeat ;margin : -22px 0 0 -44px;padding:27px 0 0 80px;height: auto;display: block;
}

inoput을 확인한 후 해당 레벨 OL이 소유한 스타일에 관한 것입니다. .

IE9 이하 브라우저를 사용하시는 경우에는 읽으실 필요가 없습니다. IE 브라우저를 사용하시기 바랍니다.

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

요약:

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

위 내용은 순수 CSS를 사용하여 축소 가능한 트리 메뉴를 만드는 방법에 대한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!