Recursief menu

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Recursief menu

Post by Gregor »

Ben wat aan het stoeien geslagen met een menu. Bedoeling is tamelijk simpel, een voorbeeld als vele menu's:
<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:

Code: Select all

{* 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?
deactivated010521

Re: Recursief menu

Post by deactivated010521 »

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.

Code: Select all

<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
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Recursief menu

Post by velden »

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

Wellicht relevant
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Recursief menu

Post by Gregor »

velden wrote: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.
Post Reply

Return to “Dutch - Nederlands”