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


  • Website Build: Perfect-Shirts.co.ukWebsite Build: Perfect-Shirts.co.uk

    Website Build: Perfect-Shirts.co.uk

    Website Design & Development

    Last year I blogged about a logo concept for a website called Perfect-Shirts.co.uk. Well the concept has finally been made into a live website, perfect-shirts.co.uk

  • Finding Category ID in WordPress

    Website Design & Development Wordpress

    If you are excluding WordPress blog categories from pages and RSS feeds you will need to know the category ID number first. This sometimes stumps

  • Xubuntu Install FontsXubuntu Install Fonts

    Xubuntu Install Fonts

    Linux

    This is not immediately obvious, as there is no built-in GUI for managing fonts in Xubuntu 11.10. 1. Open Thunar in sudo sudo thunar 2.