Memahami kelas CSS diterapkan ke menu: "lebih dalam" dan "orang tua"

10

Saya mencoba memahami perbedaan antara nama kelas "lebih dalam" dan "induk" yang diterapkan ke lielemen induk dalam menu Joomla 2.5 default. Mereka sepertinya selalu diterapkan bersama? Itu selalu "orang tua yang lebih dalam", tidak pernah satu atau yang lain sejauh yang saya bisa lihat?

Sebagai contoh:

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

Begitu...

  1. Mengapa induk limemiliki kelas "lebih dalam" dan "induk" diterapkan ketika ada sub menu? Mengapa tidak sekadar "orang tua"?

  2. Apakah ada situasi ketika satu diterapkan dan yang lain tidak? yaitu. ketika mungkin "lebih dalam" dihilangkan?

TuanWhite
sumber

Jawaban:

10
  • .deeper diterapkan ketika item menu memiliki submenu (item)
  • .parent diterapkan jika item menu ini adalah induk dari item menu lain

Jika Anda memiliki menu yang menunjukkan semua level, maka kedua kelas tersebut diterapkan ke item menu induk. Tetapi kadang-kadang Anda ingin menampilkan hanya level pertama di menu utama Anda dan menunjukkan level lain di menu samping, misalnya. .deeper kemudian tidak diterapkan pada menu utama karena hanya memiliki 1 level.

Tangkapan layar yang diedit ini akan membantu memahami kelas dengan lebih baik:

kelas menu CSS

fruppel
sumber