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


  • Buy Tumblr themes

    Templates & Themes Website Design & Development

    Tumblr is a great way to start blogging and to add a little style to your Tumble blog here is a selection of premium, commercial

  • CMSMS FormBuilder & Twitter Bootstrap buttonsCMSMS FormBuilder & Twitter Bootstrap buttons

    CMSMS FormBuilder & Twitter Bootstrap buttons

    Website Design & Development

    This one had me really stumped – how to add the “btn” class to the input of a FormBuilder form in CMS Made Simple. This

  • Centre HTML email in Windows LiveCentre HTML email in Windows Live

    Centre HTML email in Windows Live

    Website Design & Development

    The traditional method for centering up HTML email newsletters in Hotmail, or WIndows Live, involved placing a 100% table with align center defined as an