Grundlegendes zu CSS-Klassen, die auf Menüs angewendet werden: "tiefer" und "übergeordnet"

10

Ich versuche, den Unterschied zwischen den Klassennamen "tiefer" und "übergeordnet" zu verstehen, die auf übergeordnete liElemente in einem Standardmenü von Joomla 2.5 angewendet werden. Sie scheinen immer zusammen angewendet zu werden? Es ist immer "tieferes Elternteil", niemals das eine oder andere, soweit ich sehen kann?

Zum Beispiel:

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

Damit...

  1. Warum werden auf die übergeordneten liKlassen sowohl "tiefere" als auch "übergeordnete" Klassen angewendet, wenn ein Untermenü vorhanden ist? Warum nicht einfach "Eltern"?

  2. Gibt es eine Situation, in der einer angewendet wird und der andere nicht? dh. wann wird vielleicht "tiefer" weggelassen?

Herr weiß
quelle

Antworten:

10
  • .deeper wird angewendet, wenn der Menüpunkt ein Untermenü (Punkt) hat.
  • .parent wird angewendet, wenn dieser Menüpunkt einem anderen Menüpunkt übergeordnet ist

Wenn Sie ein Menü haben, das alle Ebenen anzeigt, werden beide Klassen auf einen übergeordneten Menüpunkt angewendet. Manchmal möchten Sie jedoch nur die erste Ebene in Ihrem Hauptmenü und die anderen Ebenen beispielsweise in einem Seitenmenü anzeigen. .deeper wird dann nicht im Hauptmenü angewendet, da es nur eine Ebene hat.

Dieser bearbeitete Screenshot soll helfen, die Klassen besser zu verstehen:

Menü CSS-Klassen

Fruppel
quelle