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


  • WordPress select data from any tablesWordPress select data from any tables

    WordPress select data from any tables

    Website Design & Development Wordpress

    This one had me stumped for a while, how to select data from a table that resides in the same database as the WordPress tables

  • HTML5 + CSS3 + Javascript FrameworksHTML5 + CSS3 + Javascript Frameworks

    HTML5 + CSS3 + Javascript Frameworks

    Website Design & Development

    This isn’t meant to be an exhaustive list of modern frameworks for rapid prototyping and building of websites and web apps, but here goes… Related

  • 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