Entendendo as classes CSS aplicadas aos menus: "mais profundo" e "pai"

10

Estou tentando entender a diferença entre os nomes de classe "mais profundo" e "pai" aplicados aos lielementos pai em um menu padrão do Joomla 2.5. Eles sempre parecem ser aplicados juntos? É sempre "pai mais profundo", nunca um ou outro, tanto quanto eu posso ver?

Por exemplo:

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

Assim...

  1. Por que os pais lis têm as classes "mais profunda" e "pai" aplicadas quando existe um submenu? Por que não simplesmente "pai"?

  2. Existe uma situação em que uma é aplicada e a outra não? ie quando talvez "mais profundo" é omitido?

Sr. White
fonte

Respostas:

10
  • .deeper é aplicado quando o item de menu possui um submenu (item)
  • .parent é aplicado se esse item de menu for pai de outro item de menu

Se você tiver um menu mostrando todos os níveis, as duas classes serão aplicadas a um item de menu pai. Mas às vezes você deseja mostrar apenas o primeiro nível no menu principal e mostrar os outros níveis em um menu lateral, por exemplo. .deeper não é aplicado no menu principal porque possui apenas 1 nível.

Esta captura de tela editada deve ajudar a entender melhor as classes:

menu classes CSS

fruppel
fonte