meniu pe 3 nivele -> ul,li

[tiberiu]

Folosim deseori meniuri drop-down, realizate prin ul,li + css
In typoscript, se realizeaza astfel (meniu pe 3 nivele):

Cod: [Selectează]


temp.tmenu= HMENU
temp.tmenu{
    # first level
  1 = TMENU
  1.wrap = <ul class="meniu-nivel1">|</ul>
  1{      
    NO{
      wrapItemAndSub = <li>|</li>
    }    
    ACT=1
    ACT{
      wrapItemAndSub = <li class="meniu-nivel1-activ">|</li>
    }    
    CUR=1
    CUR{
      wrapItemAndSub = <li class="meniu-nivel1-curent-activ">|</li>
    }
     
    IFSUB=1
    IFSUB{
      wrapItemAndSub = <li class="meniu-nivel1-cu-subpagini">|</li>
    }
  }  
  2 = TMENU
  2.wrap = <ul class="meniu-nivel2">|</ul>
  2{
    NO{
      wrapItemAndSub = <li>|</li>
    }
    ACT=1
    ACT{
      wrapItemAndSub = <li class="meniu-nivel2-activ">|</li>
    }
    CUR=1
    CUR{
      wrapItemAndSub = <li class="meniu-nivel2-curent-activ">|</li>
    }
    IFSUB=1
    IFSUB{
      wrapItemAndSub = <li class="meniu-nivel2-cu-subpagini">|</li>
    }
  }  
  3 = TMENU
  3.wrap = <ul class="meniu-nivel3">|</ul>
  3{
    NO{
      wrapItemAndSub = <li>|</li>
    }
    ACT=1
    ACT{
      wrapItemAndSub = <li class="meniu-nivel3-activ">|</li>
    }
    CUR=1
    CUR{
      wrapItemAndSub = <li class="meniu-nivel3-curent-activ">|</li>
    }
    IFSUB=1
    IFSUB{
      wrapItemAndSub = <li class="meniu-nivel3-cu-subpagini">|</li>
    }
  }
}


[tiberiu]

Remarcati "subst_elementUid = 1" si "{elementUid}" care se va ilocui cu id-ul paginii. Astfel se pot crea meniuri javascript.

Cod: [Selectează]


    NO.subst_elementUid = 1
    NO.allWrap = <span class="ln-link-std" onmouseover="dropMenu.showMenu('lnstd{elementUid}',this);" onmouseout="dropMenu.hideMenu('lnstd{elementUid}')" id="lnstd{elementUid}" >|</span>
    NO.ATagParams = class="ln-link-std"


[radu]

care este de fapt ideea cu "subst_elementUid" si "{elementUid}"...

este folositor pentru o groaza de situatii, inclusiv, cum a zis tiberiu, generarea de meniuri javascript (insa aici de obicei folositi obiecte TMENU_LAYERS)

in bucata de cod:

Cod: [Selectează]

onmouseout="dropMenu.hideMenu('lnstd{elementUid}')" id="lnstd{elementUid}"
cand meniul nostru va fi generat, vom avea pe onmouseout
hideMenu('Instd1') id="Instd1", hideMenu('Instd2') id="Instd2", hideMenu('Instd3') pentru linkuri la paginile cu id1, 2 si 3.

daca avem insa de exemplu un meniu hover in care trebuie sa zicem, sa specificam ceva bullet in stanga textului care sa fie la fel pe toate linkurile, mai putin pe 2 sau 3 dintre ele, sa zicem, sa fie de alte culori, atunci elementUid se dovedeste foarte folositor.

pentru un link putem defini o clasa si un id.
dam tuturor linkurilor aceeasi clasa, insa la id le trecem ceva de genul: "menu_item{elementUid}".
astfel, pe clasa definim ca toate linkurile sa foloseasca acelasi bullet (cu background-image), insa pe id-urile respective doar, suprascriem ca sa foloseasca alt bullet. astfel facem modificarile respective doar din informatiile de style si fara sa scriem conditii typoscript gen:

Cod: [Selectează]


#fa meniu normal
[PageInRootline = 1,2]
#fa acelasi meniu insa cu un anumit bullet
[end]
[PageInRootline = 3,4]
#fa acelasi meniu insa cu un al doilea bullet, etc.
[end]


daca nu ati inteles ideea, spuneti-mi si o sa scriu un tutorial pe tema asta.

cheers,
  radu mogos