Розуміння класів 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. Чому для батьківських lis застосовуються як "глибші", так і "батьківські" класи, коли є підменю? Чому б не просто «батьківський»?

  2. Чи існує ситуація, коли одна застосовується, а інша - ні? тобто. коли можливо «глибше» пропущено?

Відповіді:


10
  • .deeper застосовується, коли в пункті меню є підменю (пункт)
  • .parent застосовується, якщо цей пункт меню є батьківським для іншого елемента меню

Якщо у вас є меню з усіма рівнями, обидва класи застосовуються до батьківського елемента меню. Але іноді ви хочете показати лише перший рівень у своєму головному меню, а інші рівні, наприклад, показати в бічному меню. .deeper потім не застосовується в головному меню, оскільки він має лише 1 рівень.

Цей відредагований скріншот повинен допомогти краще зрозуміти класи:

меню класів CSS

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.