Menu opbouwen, vraag over template

[vinyl]

Ben sindskort met de laatste versie van CMSMS aan de slag. De menumanager (Navigator) lijkt iets anders in elkaar te steken dan de versie waar ik ervaring mee heb.

Ik kom dit tegen in een template:
{include file=$smarty.template nodes=$node->children}

Misschien een gekke vraag: wat doet dit stukje?

Ik ben bezig om de nieuwe Bootstrap 4 navbar met dropdown op te bouwen. Deze gebruikt voor een submenu geen dieper liggende lijst meer maar een div met links eronder. Dit stukje code is dus wel handig om te begrijpen!

Ik gok dat je naar het template zelf verwijst maar nu alleen de node aanlevert om zo extra code te vermijden?

[deactivated010521]

{$smarty.template} geeft de naam van de huidige template terug. Voor iedere niveau in het menu wordt de template opnieuw aangeroepen / ingeladen.

In de navigator template voorbeelden die ik gezien heb wordt gewerkt met: "Built-in Functions". Hierbij hoeft de template maar 1 keer ingeladen te worden. Ik denk dat deze vorm iets sneller is:
https://www.smarty.net/docs/en/language ... nction.tpl

Bestudeer de voorbeeld templates van de Navigator eens. Als je website maar 1 niveau gebruikt / geen submenu's heeft heb je dit allemaal niet nodig.

[vinyl]

Het vervelende aan de Bootstrap 4 submenu's (ik heb 1 menu item met een dropdown en child pagina's) is dat deze geen <ul><li></li></ul> meer gebruikt voor de child items maar ineens een <div> om de dropdown aan te geven en alleen links om de pagina's aan te geven:

Code: Select all

<ul class="navbar-nav">
           <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
           <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>

[deactivated010521]

Wanneer de html opmaak afhankelijk is van het menu niveau. Zal je voor ieder niveau een andere functie moeten maken.

Code: Select all

1. <- main function
1.1 <- sub function

Een andere template gebruiken en deze invoegen met:

Code: Select all

{include file='other_template' nodes=$node->children}

zal ook kunnen werken maar dat maakt het niet overzichterlijker en raad ik dan ook af.

Hier een voorbeeld implementatie die voor Bootstrap zou kunnen werken:

Code: Select all

{Navigator template='navigator_navigation_multilevel'}

Wanneer je 3 menu patterns onder de knie hebt kan je zo'n beetje alles maken. Nested (multi-level) is het lastigste maar daar zijn ook voorbeelden voor te vinden.

** plain (single-level)

https://github.com/FrontEndStudio/cmsms ... ion.14.tpl

Code: Select all

<ul>
<li><a href="#">main 01</a></li>
<li><a href="#">main 01</a></li>
</ul>

** self contained (multi-level) **

https://github.com/FrontEndStudio/cmsms ... vel.93.tpl

Code: Select all

<ul class="main>
  <li><a href="#">main</a></li>
    <ul class="sub>
      <li><a href="#">sub</a></li>
      <li><a href="#">sub</a></li>
    </ul>
</ul>

** nested (multi-level) **

Code: Select all

<ul class="main>
  <li>
    <a href="#">main</a>
    <ul class="sub>
      <li>sub</li>
      <li>sub</li>
    </ul>
  </li>
</ul>

[deactivated010521]

** nested (multi-level) **

Voorbeeld van een nested (multi-level) opmaak:

Code: Select all

{Navigator template='navigator_navigation_multilevel_nested'}

https://github.com/FrontEndStudio/cmsms ... ted.94.tpl

Bekijk ook: /admin/Modules/Navigator/templates/*.tpl daar heb ik mijn inspiratie vandaan.

[vinyl]

Met de standaard templates ben ik bekend. Dat lost alleen het probleem helaas niet op.

Je kunt dezelfde functie/template niet aanroepen voor kind items omdat dit geen list items zijn.

in plaats van de standaard <ul> en <li> tags wordt bij submenu's gebruik gemaakt van <div> en <a> tags.