Zrozumienie klas CSS stosowanych w menu: „głębsze” i „nadrzędne”

10

Próbuję zrozumieć różnicę między nazwami klas „głębszych” i „nadrzędnych” zastosowanych do lielementów nadrzędnych w domyślnym menu Joomla 2.5. Zawsze wydają się być stosowane razem? To zawsze jest „głębszy rodzic”, nigdy jedno lub drugie, o ile widzę?

Na przykład:

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

Więc...

  1. Dlaczego rodzice limają zarówno klasy „głębsze”, jak i „rodzicielskie”, gdy istnieje podmenu? Dlaczego nie po prostu „rodzic”?

  2. Czy zdarza się sytuacja, gdy jedna jest stosowana, a druga nie? to znaczy. kiedy może pominięto „głębsze”?

MrWhite
źródło

Odpowiedzi:

10
  • .deeper jest stosowany, gdy element menu ma podmenu (element)
  • .parent jest stosowane, jeśli ten element menu jest rodzicem innego elementu menu

Jeśli masz menu pokazujące wszystkie poziomy, wówczas obie klasy są stosowane do nadrzędnego elementu menu. Ale czasami chcesz pokazać tylko pierwszy poziom w menu głównym, a pozostałe poziomy na przykład w menu bocznym. .deeper nie jest wtedy stosowane w menu głównym, ponieważ ma tylko 1 poziom.

Ten edytowany zrzut ekranu powinien pomóc lepiej zrozumieć klasy:

menu klasy CSS

fruppel
źródło