CMSMS menus and Twitter Bootstrap

CMSMS menus and Twitter Bootstrap

This is a snippet post on getting Twitter Bootstrap menus working with CMS Made Simple Menu Manager. No extra CSS is required apart from that included within the Twitter Bootstrap pack

The first example is for the Navbar example, a full width top navigation with drop down menus. Copy and past the code into CMSMS menu manager and insert into your template

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<ul><li>
{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}

{if $node->parent == true }

<li><a href="{$node->url}" data-toggle="dropdown">{$node->menutext} <b></b></a>

{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
<li><a href="{$node->url}" data-toggle="dropdown">{$node->menutext} <b></b></a>

{elseif $node->current == true}
<li><a href="{$node->url}">{$node->menutext}</a>

{elseif $node->type == 'sectionheader'}
<li><a href="{$node->url}" data-toggle="dropdown">{$node->menutext} <b></b></a>

{else}
<li><a href="{$node->url}">{$node->menutext}</a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

The next example recreates the Nav lists – simple stacked navs which are most commonly used for sidebars

{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul class='nav nav-list'>" 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}

{if $node->current == true}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li > <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li>{$node->menutext}

{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Find out more about Twitter Bootstrap or follow this developing thread on the CMSMS Forum

Oliver Partridge

Building websites since 2000, I have a wealth of experience in eMarketing, SEO, e-mail marketing and social media marketing. Google+ and Twitter

Leave a Reply


  • Symphony CMS for beginners

    Website Design & Development

    Symphony is one of many CMSs out there but with one big difference. Where most use MySQL to store things like content and templates, Symphony

  • Google “Let it snow”

    Website Design & Development

    Here is a festive Easter egg from Google. Type in ‘let it snow’ and click search and in front of your eyes the search results

  • Change twitter bootstrap button coloursChange twitter bootstrap button colours

    Change twitter bootstrap button colours

    Website Design & Development

    If you haven’t come across Twitter Bootstrap then I suggest you have a quick look at their site which gives the best explanation of what