web-dev-qa-db-fra.com

Comprendre les classes CSS appliquées aux menus: "deeper" et "parent"

J'essaie de comprendre la différence entre les noms de classes "plus profonds" et "parents" appliqués aux éléments parents li dans un menu par défaut de Joomla 2.5. Ils semblent toujours être appliqués ensemble? C'est toujours un "parent plus profond", jamais l'un ou l'autre aussi loin que je puisse voir?

Par exemple:

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

Alors...

  1. Pourquoi le parent lis a-t-il les deux classes "plus profonde" et "parent" appliquées lorsqu'il existe un sous-menu? Pourquoi ne pas simplement "parent"?

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

joomla-2.5menucss
10
MrWhite
  • . deeper est appliqué lorsque l'élément de menu comporte 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 de votre menu principal et afficher les autres niveaux dans un menu latéral, par exemple. .deeper n’est alors pas appliqué au menu principal car il n’a qu'un niveau.

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

menu CSS classes

10
fruppel