메뉴에 적용된 CSS 클래스 이해 : "더 깊은"및 "부모"


10

li기본 Joomla 2.5 메뉴에서 부모 요소에 적용되는 "더 깊은"클래스 이름과 "부모"클래스 이름의 차이점을 이해하려고 합니다. 그들은 항상 함께 적용되는 것 같습니다? 그것은 항상 "더 깊은 부모", 내가 볼 수있는 한 어느 쪽도 아닌가?

예를 들면 다음과 같습니다.

<ul class="menu">
<li class="item-108 deeper parent"><a href="https://joomla.stackexchange.com/menu1" >Menu1</a>
    <ul>
    <li class="item-110"><a href="https://joomla.stackexchange.com/menu1/sub11" >Sub11</a></li>
    <li class="item-121"><a href="https://joomla.stackexchange.com/menu1/sub12" >Sub12</a></li>
    <li class="item-122"><a href="https://joomla.stackexchange.com/menu1/sub13" >Sub13</a></li>
    </ul></li>
<li class="item-109 deeper parent"><a href="https://joomla.stackexchange.com/menu2" >Menu2</a>
    <ul>
    <li class="item-130"><a href="https://joomla.stackexchange.com/menu2/sub21" >Sub21</a></li>
    </ul></li>
<li class="item-111 active deeper parent"><a href="https://joomla.stackexchange.com/menu3" >Menu3</a>
    <ul>
    <li class="item-118"><a href="https://joomla.stackexchange.com/menu3/sub31" >Sub31</a></li>
    <li class="item-120 current active"><a href="https://joomla.stackexchange.com/menu3/sub32" >Sub32</a></li>
    <li class="item-131"><a href="https://joomla.stackexchange.com/menu3/sub33" >Sub33</a></li>
    </ul></li>
<li class="item-112"><a href="https://joomla.stackexchange.com/menu4" >Menu4</a></li>
</ul>

그래서...

  1. li하위 메뉴가있을 때 부모에 "더 깊은"클래스와 "부모"클래스가 모두 적용된 이유는 무엇 입니까? 왜 단순히 "부모"가 아닌가?

  2. 하나가 적용되고 다른 하나가 적용되지 않는 상황이 있습니까? 즉. 아마도 "더 깊은"이 생략되었을 때?

답변:


10
  • 메뉴 항목에 하위 메뉴 (항목)가 있으면 .deeper 가 적용됩니다.
  • 이 메뉴 항목이 다른 메뉴 항목의 부모 인 경우 .parent 가 적용됩니다.

모든 레벨을 표시하는 메뉴가 있으면 두 클래스 모두 상위 메뉴 항목에 적용됩니다. 그러나 때로는 주 메뉴에서 첫 번째 수준 만 표시하고 사이드 메뉴에서 다른 수준을 표시하려고 할 수도 있습니다. 그러면 .deeper는 1 개의 레벨 만 있으므로 기본 메뉴에 적용되지 않습니다.

이 편집 된 스크린 샷은 수업을 더 잘 이해하는 데 도움이됩니다.

메뉴 CSS 클래스

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.