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.<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>
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}