• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 4 posts ] 
Author Message
 Post subject: Recursief menu
PostPosted: Thu May 31, 2018 8:39 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
Ben wat aan het stoeien geslagen met een menu. Bedoeling is tamelijk simpel, een voorbeeld als vele menu's:
Quote:
<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:
{* 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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Recursief menu
PostPosted: Fri Jun 01, 2018 9:08 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1227
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:
<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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Recursief menu
PostPosted: Fri Jun 01, 2018 12:43 pm 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 2973
Location: The Netherlands
Misschien heb je het al gelezen maar toch nog even een link: viewtopic.php?p=328116#p328116

Wellicht relevant


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Recursief menu
PostPosted: Fri Jun 01, 2018 3:48 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1781
Location: The Netherlands
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting