it-swarm-es.tech

Comprensión de las clases CSS aplicadas a los menús: "más profundo" y "padre"

Estoy tratando de entender la diferencia entre los nombres de clase "más profundos" y "primarios" aplicados a los elementos primarios li en un menú predeterminado de Joomla 2.5. ¿Siempre parecen aplicarse juntos? ¿Siempre es "padre más profundo", nunca uno u otro por lo que puedo ver?

Por ejemplo:

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

Asi que...

  1. ¿Por qué los padres lis tienen aplicadas las clases "más profundas" y "primarias" cuando hay un submenú? ¿Por qué no simplemente "padre"?

  2. ¿Existe una situación en la que uno se aplica y el otro no? es decir. cuando tal vez se omite "más profundo"?

10
MrWhite
  • . más profundo se aplica cuando el elemento del menú tiene un submenú (elemento)
  • . parent se aplica si este elemento del menú es padre de otro elemento del menú

Si tiene un menú que muestra todos los niveles, ambas clases se aplican a un elemento del menú principal. Pero a veces desea mostrar solo el primer nivel en su menú principal y mostrar los otros niveles en un menú lateral, por ejemplo. .deeper no se aplica en el menú principal porque solo tiene 1 nivel.

Esta captura de pantalla editada debería ayudar a comprender mejor las clases:

menu CSS classes

10
fruppel