Comprendre les classes CSS appliquées aux menus: «plus profond» et «parent»

10

J'essaie de comprendre la différence entre les noms de classe "plus profond" et "parent" appliqués aux liéléments parents dans un menu Joomla 2.5 par défaut. Ils semblent toujours être appliqués ensemble? C'est toujours "un parent plus profond", jamais l'un ou l'autre à ma connaissance?

Par exemple:

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

Alors...

  1. Pourquoi les liclasses parent ont-elles à la fois des classes "plus profondes" et "parent" quand il y a un sous-menu? Pourquoi pas simplement "parent"?

  2. Y a-t-il une situation où l'un est appliqué et l'autre non? c'est à dire. quand peut-être "plus profond" est-il omis?

MrWhite
la source

Réponses:

10
  • .deeper est appliqué lorsque l'élément de menu a un sous-menu (élément)
  • .parent est appliqué si cet élément de menu est parent d'un autre élément de menu

Si vous avez un menu affichant tous les niveaux, les deux classes sont appliquées à un élément de menu parent. Mais parfois, vous souhaitez afficher uniquement le premier niveau dans votre menu principal et afficher les autres niveaux dans un menu latéral, par exemple. .deeper n'est alors pas appliqué dans le menu principal car il n'a qu'un seul niveau.

Cette capture d'écran modifiée devrait aider à mieux comprendre les classes:

menu classes CSS

fruppel
la source