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

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

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

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

HTML 코드:

<li>
<label for="subsubfolder1">下级</label>
<input id="subsubfolder1" type="checkbox" />
<ol>
<li class="file"><a>下级</a></li>
<li>
<label for="subsubfolder2">下级</label>
<input id="subsubfolder2" type="checkbox" />
<ol>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
<li class="file"><a>无限级</a></li>
</ol>
</li>
</ol>
</li>

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

다운로드


체크박스에 체크된 값이 있는 경우 그때 우리는 OL을 현실로 만들어 우리가 원하는 기능을 달성하도록 할 것입니다.

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

li input {
position:absolute;left:0;margin-left:0;opacity:0;z-index:2;cursor:pointer;height:1em;width:1em;top:0;
}
input + ol {
display:none;
}
input + ol > li { 
height:0;overflow:hidden;margin-left:-14px!important;padding-left:1px; 
}
li label {
cursor:pointer;display:block;padding-left:17px;background:url(toggle-small-expand.png) no-repeat 0px 1px;
}
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;
}
input:checked + ol > li {
height:auto;
}

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

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

inoput이 확인한 후 동일한 OL이 소유한 스타일에 대한 내용입니다.

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

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

요약:

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