TYPO3 Agency - coding, design and website development

Dvojúrovňové menu

Zadanie

Vytvoriť menu s dvoma úrovňami formátované ako vnorený nečíslovaný zoznam (HTML tagy ul/li).
Použijeme Typoscript objekty HMENU a TMENU.

 

Riešenie (Typoscript)

temp.menu = HMENU
temp.menu {
  entryLevel = 0
}
temp.menu.1 = TMENU
temp.menu.1 {
  wrap = <ul class="first-level">|</ul>
  expAll = 1
  noBlur = 1
  NO {
    wrapItemAndSub = <li>|</li>
    ATagTitle.field = title
    ATagParams = class="parent"
  }
  CUR = 1
  CUR {
    wrapItemAndSub = <li>|</li>
    ATagTitle.field = title
    ATagParams = class="opened parent"
  }
  ACT = 1
  ACT < .CUR
}
temp.menu.2 = TMENU
temp.menu.2 {
  wrap = <ul class="second-level">|</ul>
  noBlur = 1
  NO {
    allWrap = <li>|</li>
    ATagTitle.field = title
  }
  CUR = 1
  CUR {
    allWrap = <li>|</li>
    ATagTitle.field = title
  }
  ACT = 1
  ACT < .CUR
}

 

Výsledok (HTML)

<ul class="first-level">
	<li><a href="cms-typo3/co-je-typo3/" title="TYPO3"  class="parent">TYPO3</a>
		<ul class="second-level">
			<li><a href="cms-typo3/co-je-typo3/" title="Čo je TYPO3">Čo je TYPO3</a></li>
			<li><a href="cms-typo3/preco-typo3/" title="Prečo TYPO3">Prečo TYPO3</a></li>
			<li><a href="cms-typo3/vyhody-typo3/" title="Výhody TYPO3">Výhody TYPO3</a></li>
			<li><a href="cms-typo3/porovnanie-cms/" title="Porovnanie CMS">Porovnanie CMS</a></li>
			<li><a href="cms-typo3/systemove-poziadavky-typo3/" title="Systémové požiadavky TYPO3">Systémové požiadavky TYPO3</a></li>
		</ul>
	</li>
	<li><a href="sluzby/" title="Služby"  class="parent">Služby</a></li>
	<li><a href="referencie/referencie/" title="Referencie"  class="parent">Referencie</a>
		<ul class="second-level">
			<li><a href="referencie/referencie/" title="Referencie">Referencie</a></li>
			<li><a href="referencie/klienti/" title="Klienti">Klienti</a></li>
		</ul>
	</li>
	<li><a href="o-nas/kto-sme/" title="O nás"  class="parent">O nás</a>
		<ul class="second-level">
			<li><a href="o-nas/kto-sme/" title="Kto sme">Kto sme</a></li>
			<li><a href="o-nas/strieborne-clenstvo/" title="Strieborné členstvo">Strieborné členstvo</a></li>
		</ul>
	</li>
	<li><a href="wiki/" title="Wiki"  class="parent">Wiki</a>
		<ul class="second-level">
			<li><a href="wiki/dvojurovnove-menu/" title="Dvojúrovňové menu">Dvojúrovňové menu</a></li>
			<li><a href="wiki/klucove-slova/" title="Kľúčové slová">Kľúčové slová</a></li>
		</ul>
	</li>
</ul>