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


10

Estoy tratando de entender la diferencia entre los nombres de clase "más profundos" y "primarios" aplicados a los lielementos primarios 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="/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>

Entonces...

  1. ¿Por qué los padres litienen 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"?

Respuestas:


10
  • .deeper 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:

clases de menú CSS

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.