•  10-07-2019
  •  | 
  •  

문제

순수한 마크 업으로 내비게이션 인터페이스와 같은 트리를 만들고 싶습니다 (즉, JavaScript/jQuery 등이 필요하지 않음).

순서가없는 목록 <ul> 최상의 솔루션처럼 보이고 이것을 찾았습니다. simplebits.com 튜토리얼 필요한 솔루션에 매우 가깝습니다. 그러나 저자는 모든 지점의 최종/최대 깊이가 이미 알려져 있다고 가정하여 스타일 시트를 정의합니다.

#sitemap li ul li ul li {
    padding-left: 16px;
    background: url(bullet.gif) no-repeat 0 50%;
}

마크 업이 "무한히"내려 오는 방법이 있는지 알고 싶습니다. 스타일링이이를 완벽하게 지원하도록합니다.

이에 대한 자세한 내용이 필요한 경우 알려주십시오.

도움이 되었습니까?

해결책

이것에 대한 자습서가 있지만 두 가지 문제가 있습니다.

  1. IE6은 지원하지 않습니다 : 앵커 이외의 태그에 호버링하므로 해당 브라우저에 대한 JavaScript 솔루션이 필요합니다. 그리고
  2. 주요 브라우저에서 일관되게 작동하는 것은 실제로 복잡합니다.

jQuery와 Superfish (Suckefish에서 영감) 플러그인을 사용하여 대안을 고려하십시오.

<ul class="menu">
  <li>...
</ul>
<script type="text/javascript">
$(function() {
  $("ul.menu").superfish();
});
</script>

완료.

(반) 순수한 CSS 루트를 사용하는 경우, 나는이를 위해 기존 프레임 워크 중 하나를 사용하는 것이 좋습니다 (Suckerfish 또는 Detivative). 그렇지 않으면 당신은 단지 머리카락을 꺼내고 제대로 작동하기 위해 많은 시간을 할애 할 것입니다.

깊이에 대한 질문에 답하기 위해 : 본질적으로 언급 한 규칙은 무한한 깊이가 될 것입니다. CSS의 공간은 아동 선택기가 아닌 자손 선택기임을 기억하십시오. 반복 된 그룹의 이유는 규칙이 세 번째 레벨 다운에서만 적용되기 때문입니다.

첫 번째와 두 번째 레벨에는 특별한 스타일이 있기 때문입니다. 첫 번째는 HoritzOntal 또는 수직 막대입니다. 두 번째는 그로부터 팝 아웃하지만 세 번째 레벨에서 같은 방식으로 지속적으로 팝 아웃됩니다.

다른 팁

제공 한 마크 업은 직접 지정하지 않고 추가 요소에 대해 작동해야합니다.

예를 들어:

#sitemap li {} -->level 1 and under
#sitemap li li {}--> level 2 and under (overrides previous rule)
#sitemap li li li {}--> level 3 and under (overrides previous rule)

따라서 마지막 규칙은 4, 5, 6 이상에 자동으로 적용됩니다.

모든 레벨에 대한 특정 스타일을 원하지 않는 한 괜찮을 것입니다.

순서가없는 목록 요소에 클래스를 할당하는 것은 어떻습니까?

#sitemap li.tree
{
   padding-left: 16px;
}

왜 이것이 효과가 없는지 모르겠지만 내가 틀렸다면 바로 잡으십시오.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top