CMS Made Simple Forums
https://forum.cmsmadesimple.org/

Recursief menu
https://forum.cmsmadesimple.org/viewtopic.php?f=13&t=78505
Page 1 of 1

Author:  Gregor [ Thu May 31, 2018 8:39 pm ]
Post subject:  Recursief menu

Ben wat aan het stoeien geslagen met een menu. Bedoeling is tamelijk simpel, een voorbeeld als vele menu's:
\$1:
<a class="navbar-item" href="homepage">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable"> {* parent *}
<a class="navbar-link" href="AAA">
A
</a>
<div class="navbar-dropdown is-boxed"> {* childeren *}
<a class="navbar-item" href="A1">
A1
</a>
<a class="navbar-item" href="A2">
A2
</a>
<a class="navbar-item" href="A3">
A3
</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="BBB">
B
</a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item" href="B1">
B1
</a>
<a class="navbar-item" href="B2">
B2
</a>
<a class="navbar-item" href="B3">
B3
</a>
<div class="navbar-item has-dropdown is-hoverable"> {* submenu of B *}
<a class="navbar-link" href="BBBCCC">
B
</a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item" href="B1">
B1
</a>
<a class="navbar-item" href="B2">
B2
</a>
<a class="navbar-item" href="B3">
B3
</a>
</div>
</div>
</div>
</div>


Nu ben heb ik een Navigator template gemaakt dit het doet op het niveau van 'homepage' en 'AAA' en A1-A3. Bij het 'BBB' gaat het de mist in. Omwille van de lengte van het voorbeeld heb ik 'CCC' eruit gelaten, maar dat laat zich raden hoe dat eruit ziet. Deze 'BBB' en 'CCC' zijn niet meer afzonderlijk te benaderen, maar vormen een geheel. Daarmee zijn de submenu's van 'BBB' ook niet meer te benaderen.

Voor het toewijzen van classes maak ik gebruik van recursiviteit en dat gaat goed t/m 'AAA', en daarna lijkt het dat ik de <div navbar-item has-dropdown is-hoverable> niet meer gesloten krijgt.

De template:
\$1:
{* simple navigation *}
{* note, function can only be defined once *}
{*
  variables:
  node: contains the current node.
  aclass: is used to build a string containing class names given to the a tag if one is used
  liclass: is used to build a string containing class names given to the li tag.
*}
{$aclass=''}
{function name=Nav_menu depth=1}
  {foreach $data as $node}
    {if $node->current || $node->parent}
      {* this is the current page *}
        {assign var='aclass' value='button is-active'}
    {/if}
    {* build the menu item node *}
    {if $node->type == 'sectionheader'}
        <li class='menu-list {$liclass}'>{$node->menutext}
        {if isset($node->children)}
            {Nav_menu data=$node->children depth=$depth+1}
        {/if}
      </li>
    {else if $node->type == 'separator'}
        <p class='menu-label {$liclass}'><hr class='navbar-divider'/></p>
    {else}
      {* regular item *}
        {if isset($node->children)}
            {assign var='aclass' value='navbar-item has-dropdown is-hoverable'}
            <div class="{$aclass}">
            {assign var='aclass' value='navbar-link'}
        {/if}
        <a{if $aclass!=''} class="{$aclass}"{/if} href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
       
        {if isset($node->children)}
            <div class="navbar-dropdown is-boxed">
                {assign var='aclass' value='navbar-item'}
                {Nav_menu data=$node->children depth=$depth+1}
            </div>
            {if {$depth} == 0}
                </div> {* needed to close open div from is-hoverable *}
            {/if}
        {else}
            {assign var='aclass' value='navbar-item'}
        {/if}
    {/if}
  {/foreach}
{/function}

{if isset($nodes)}
{Nav_menu data=$nodes depth=0}
{/if}


Wat zie ik over het hoofd?

Author:  arnoud [ Fri Jun 01, 2018 9:08 am ]
Post subject:  Re: Recursief menu

Er zijn grofweg 3 navigation patterns. Single level (flat), Multi level nested en Multi level unnested.

Volgens mij heb je een nested markup nodig, de sub wordt binnen de main geplaatst en daarna pas afgesloten.

\$1:
<ul>
  <li>main <-- nesting
    <ul>
      <li>sub</li>
      <li>sub</li>
    </ul>
  </li>
</ul>


Ik grijp altijd terug naar mijn standaard templates:

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

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

Author:  velden [ Fri Jun 01, 2018 12:43 pm ]
Post subject:  Re: Recursief menu

Misschien heb je het al gelezen maar toch nog even een link: viewtopic.php?p=328116#p328116

Wellicht relevant

Author:  Gregor [ Fri Jun 01, 2018 3:48 pm ]
Post subject:  Re: Recursief menu

velden \velden:
Misschien heb je het al gelezen maar toch nog even een link: viewtopic.php?p=328116#p328116

Wellicht relevant
Mooi uitgelegd Velden. Ik had nog niet op 'recursief' gezocht en was dus jouw uitleg nog niet tegengekomen. Ik ken de theorie uit het predicatenlogica van enige tijd geleden......

Misschien wil Rolf dit jouw uitleg aan de manual pagina's toevoegen; best een waarde aanvulling.

Page 1 of 1 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/