Nu heb ik echter alleen een nieuwe uitdaging. Ik wil een menu creeëren van ongeveer 8 menu items, met in het midden het bedrijfslogo. 4 items links er van, 4 rechts. Ik kan handmatig een menu maken, maar dit is natuurlijk niet wenselijk aangezien de items regelmatig gewijzigd moeten worden van naam of volgorde.
Is het mogelijk om in dit menu template iets op te nemen dat je in de {foreach} opneemt dat hij alleen de eerste 4 items renderd, dan het logo en dan weer 4 items.
Een andere optie die bedacht is om misschien een een 9e menu item te gebruiken voor het logo, die dan in het midden te zetten en dan op één of andere manier aanroepen via CSS om enkel deze <li> om te toveren tot (klikbaar) logo?
Code: Select all
{* Note1: bootstrap v3 does not natively support more than 2 levels of nav so call with number_of_levels=2 for performance *}
{* Note2: add the loadprops=0 param for performance, this template does not need extended params *}
{* Note3: Pages with children will behave like section headers, and not be navigable.. this is also default behavior with boostrap v3, investigate the css to activate the dropdown on hover instead of click *}
{if $count > 0}
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="dropdown-menu">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{$classes=''}
{if $node->parent == true or $node->current == true}
{$classes='active'}
{if $node->parent== true}{$classes=$classes|cat:' parent'}{/if}
{/if}
{if $node->type == 'sectionheader'}
{if $node->haschildren == true}
<li class="dropdown {$classes}"><a class="dropdown-toggle {$classes}" data-toggle="dropdown"><span>{$node->menutext}</span></a>
{else}
<li class="nav-header">{$node->menutext}</li>
{/if}
{elseif $node->type == 'separator'}
<li style="divider">
{elseif $node->haschildren == true}
<li class="dropdown {$classes}"><a class="dropdown-toggle {$classes}" data-toggle="dropdown" {if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span> <b class="caret"></b></a>
{else}
<li class="{$classes}"><a class="{$classes}" {if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
</div>
</div>
</div>
{/if}
