Понимание классов CSS, применяемых к меню: «глубже» и «родитель»


10

Я пытаюсь понять разницу между «более глубокими» и «родительскими» именами классов, применяемыми к родительским liэлементам в стандартном меню Joomla 2.5. Кажется, они всегда применяются вместе? Это всегда "более глубокий родитель", никогда, насколько я могу видеть, ни того, ни другого?

Например:

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

Так...

  1. Почему к родительскому liклассу применяются оба «более глубоких» и «родительских» класса, когда есть подменю? Почему не просто "родитель"?

  2. Есть ли ситуация, когда один применяется, а другой нет? то есть. когда, возможно, "глубже" опущено?

Ответы:


10
  • .deeper применяется, когда пункт меню имеет подменю (элемент)
  • .parent применяется, если этот элемент меню является родительским для другого элемента меню

Если у вас есть меню, отображающее все уровни, то оба класса применяются к элементу родительского меню. Но иногда вы хотите показать только первый уровень в главном меню и показать другие уровни в боковом меню, например. В этом случае .deeper не применяется в главном меню, поскольку имеет только 1 уровень.

Этот отредактированный скриншот должен помочь лучше понять классы:

CSS классы меню

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.