home | sitemap

Los submenu: <!-- TMPL_VAR NAME="nextlevel" -->

Deze variabele bevat het huidige submenu, inclusief, als eerste item, een link naar het bijbehorende hoofdmenu. nextlevel kan worden gebruikt om bijvoorbeeld het submenu altijd in beeld te hebben ondanks een dropdown menu.

De variabele nextnextlevel bevat het huidige subsubmenu.

De html structuur van (next)nextlevel is net als een menu een UL met een aantal LI's, waarbij de eerste LI (=titel menu) de classname first heeft. En net als bij het menu heeft het huidige menu-item de classname current. Voorbeeld:

<ul>
  <li class="first"><a href="/test/m000001/p000002.html">Menu 1</a></li>
  <li><a class=current href="/test/m000001/000003/p000004.html"><SPAN>Submenu 1</SPAN></a></li>
</ul>

Deze variabele kan standaard omgeven worden door een DIV met de ID nextlevel zodat het cms het losse submenu meteen 'herkend'. Het kan ook los worden gebruikt in elk ander element, mits dat element is voorzien van de classname xcms_onclick.

Voorbeelden

Voorbeeld waarin beide (nextlevel en nextnextlevel) worden gebruikt, maar er altijd maar 1 zichtbaar is:

...
<div id="nextlevel">
  <!-- TMPL_IF NAME="nextnextlevel" -->
    <!-- TMPL_VAR NAME="nextnextlevel" -->
  <!-- TMPL_ELSE -->
    <!-- TMPL_VAR NAME="nextlevel" -->
  <!-- /TMPL_IF -->
</div>
...

De variabele (next)nextlevel kan ook worden gebruikt om te 'kijken' of er submenu getoond wordt. Als de variabele (next)nextlevel leeg is, dan is er geen submenu. Via de TMPL_IF constructie in bovenstaande voorbeeld zou je zo in je vormgeving dus rekening kunnen houden met een eventueel submenu, bijvoorbeeld door als er geen submenu is tekst over de volle breedte te tonen, en als er wel een submenu is wat ruimte links of rechts van de tekst vrijhouden:

...
  <div id="tekst" <!-- TMPL_IF NAME="nextlevel" -->class="hassub"<!-- /TMPL_IF --><!-- TMPL_IF NAME="edit" --> contenteditable="true" <!-- /TMPL_IF -->>
    <!-- TMPL_VAR NAME="tekst" -->
  </div>
...

 met in de css:

#tekst {
  padding: 20px;
}
#tekst.hassub {
  padding-left: 200px; /* houd links ruimte vrij voor een absoluut gepositioneerd submenu */
}