Page 1 of 1
[SOLVED] Hulp bij Bootstrap Menu Template
Posted: Fri Feb 28, 2014 4:07 pm
by brentnl
Ik had een bootstrap framework voor CMSMS gedownload, maar nu blijkt dat die gebasseerd is op een oudere versie van bootstrap. Nu wil ik dus zelf aan de slag met de nieuwste versie, maar ik loop vast bij het menu.
Dit is een gedeelte van de code zoals de output zou moeten zijn;
Code: Select all
<div class="nav-collapse navbar-responsive-collapse collapse" style="height: 0px;">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</li>
</ul>
</div>
Is er iemand die mij op de goede weg krijgt met het omzetten naar een CMSMS menu template?
Re: Hulp bij Bootstrap Menu Template
Posted: Fri Feb 28, 2014 4:22 pm
by velden
Re: Hulp bij Bootstrap Menu Template
Posted: Fri Feb 28, 2014 7:11 pm
by brentnl
Had de zoekfunctie rechtsboven gebruikt in plaats van die van het forum ... Vandaar dat ik het niet kon vinden ..
Heb met behulp van Calguys code wel het beoogde resultaat kunnen halen en ook een responsive variant van het menu ingebouwd, zoals dat in bootstrap zit.
Voor de geïnteresseerde:
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}
Re: [SOLVED] Hulp bij Bootstrap Menu Template
Posted: Mon Mar 10, 2014 5:26 pm
by rodeto
Hallo brentnl, is het jou ook gelukt om de children van een pagina goed naar voren te krijgen?
Dat is nl waar ik tegenaan loop. Op basis van deze template krijg ik alleen de eerste pagina te zien en onderliggende pagina's komen niet naar voren. Geen idee waar het mis gaat bij mij.
Wellicht kun je me helpen.
Re: [SOLVED] Hulp bij Bootstrap Menu Template
Posted: Mon Mar 10, 2014 7:53 pm
by brentnl
rodeto wrote:Hallo brentnl, is het jou ook gelukt om de children van een pagina goed naar voren te krijgen?
Dat is nl waar ik tegenaan loop. Op basis van deze template krijg ik alleen de eerste pagina te zien en onderliggende pagina's komen niet naar voren. Geen idee waar het mis gaat bij mij.
Wellicht kun je me helpen.
Uh, level 2 bedoel je? Die werkt bij mij gewoon met bovenstaande template. Krijg je een dropdown menu, wat ook responsive goed werkt.
Weet je zeker dat je de laatste versie van bootstrap en de bijbehorende CSS hebt geïnstalleerd?
Re: [SOLVED] Hulp bij Bootstrap Menu Template
Posted: Mon Mar 10, 2014 11:26 pm
by rodeto
Alles nogmaals (voor de zekerheid) geupload. Mijn eigen custom css file eruit gehaald. Veranderde niks.
Blijkt dat ik zelf een fout heb gemaakt in mijn template waardoor een en ander niet goed over is gekomen.
Dat aangepast en de template werkt inderdaad perfect! Kost even wat tijd maar dan heb je ook wat
Mea Culpa.