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


  • SEO Content Creation

    Website Design & Development

    Creating content for a website can be a time consuming job. You may need to do some lengthy research into the topic and the grammar

  • Open Source Time tracking software

    Website Design & Development

    I did a quick bit of research today to find some form of time tracking software to work out how long I spent on various

  • 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