Twitter Boostrap and Smarty Menu

rpw · **Joined:** Tue Jun 12, 2012 3:56 pm **Posts:** 6

Hi,

I've been banging my head against a wall, trying to create a smarty menu template to output stock twitter boostrap menu. The intention is to port twitter bootsrap to cms made simple, with a range of stock layouts (for blog etc) and make it available

However, I've never ever written a menu in CMSMS... I either use stock {menu} and just style it up... or hardwire the links in....

Can anyone help? or at least point me in the right direction. Here is a dummy menu I'm building for a gym website.

Cheers,
Rob

Code:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="/">Twitter Boostrap</a>
      <div class="nav-collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="/">Home</a></li>
          
          <li class="dropdown"><a href="{cms_selflink href='about-us'}" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
          <ul class="dropdown-menu">
          <li><a href="{cms_selflink href='about-us'}">About us</a></li>
          <li><a href="{cms_selflink href='location-hire'}">Location Hire</a></li>
          </ul>
          </li>
          
          
            <li class="dropdown"><a href="{cms_selflink href='news'}" class="dropdown-toggle" data-toggle="dropdown">News <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="{cms_selflink href='news'}">News</a></li>
              <li><a href="{cms_selflink href='blog'}">Blog</a></li>
              <li><a href="{cms_selflink href='events'}">Events</a></li>
            </ul>
            </li>
          
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Training <b class="caret"></b></a>
            <ul class="dropdown-menu">
            <li><a href="{cms_selflink href='personal-training'}">Personal Training</a></li>
            <li><a href="{cms_selflink href='ultramits-training'}">UltraMits Training</a></li>
            <li><a href="{cms_selflink href='group-fitness'}">Group Fitness</a></li>
            <li><a href="{cms_selflink href='trx-class'}">TRX Class</a></li>
            <li><a href="{cms_selflink href='womens-boxing-fitness'}">Womens Boxing Fitness</a></li>
            <li><a href="{cms_selflink href='white-collar-boxing'}">White Collar Boxing</a></li>
            <li><a href="{cms_selflink href='boxing-bootcamp'}">Boxing Bootcamp</a></li>
            <li><a href="{cms_selflink href='cabbies-boxing-class'}">Cabbies Boxing Class</a></li>
            </ul>
            </li>
            
            <li><a href="{cms_selflink href='membership'}">Membership</a></li>
            
          
          <li><a href="{cms_selflink href='contact-find-us'}">Contact / Find us</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Dr.CSS · **Posted:** Wed Jun 13, 2012 6:06 pm

Do you have any kind of working example of what it should look like and what it should do?...

I have no idea what "Twitter Bootstrap" is...

Zoorlat · **Posted:** Wed Jun 13, 2012 6:35 pm

All you need is a pretty simple modification of one of the standard menu templates in the Menu Manager.

The cssmenu template is a good place to start from, it is almost everything you want straight out of the box I think. Just modify it with your the class names Bootstrap uses.

(Good idea to port Bootstrap to CMSMS by the way. Hope you'll be able to share your efforts!)

rpw · **Joined:** Tue Jun 12, 2012 3:56 pm **Posts:** 6

Hi Zoorlat, Thanks - through a process of trial and error, I figured it out... although I had to bodge the active parent with a bit of javascript (I sorta get javascript - can never get my head around smarty though).

Here is the work in progress
http://ringtonehealthandfitness.triathlonweekly.net/

Dr CSS - http://twitter.github.com/bootstrap/

Boostrap (at least in my opinion) is one of the better css frameworks / ui kits. Gives you a bunch of stuff to quickly put something together. Also inherently responsive out of the box.

Code:

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{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 class="nav pull-right">
{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 class="dropdown"><a class="dropdown-toggle" href="{$node->url}" data-toggle="dropdown">{$node->menutext} <b class="caret"></b></a>
  
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="dropdown"><a class="dropdown-toggle" href="{$node->url}" data-toggle="dropdown">{$node->menutext} <b class="caret"></b></a>

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

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

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

{/if}

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

Once this is done, the plan is to package stuff up and release it as a cms template, with a ready made layouts etc. Just got to make time to get it done

Cheers,

rpw · **Joined:** Tue Jun 12, 2012 3:56 pm **Posts:** 6

Hmm... posted a reply, and its not shown up?

essexboyracer · **Joined:** Wed Jun 20, 2007 5:40 pm **Posts:** 75

Slightly amended children_exist should'v been haschildren (on 1.8 at least)

Code:

{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 class="nav"><li class="dropdown">
{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 class="dropdown"><a class="dropdown-toggle" href="{$node->url}" data-toggle="dropdown">{$node->menutext} <b class="caret"></b></a>
  
{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="dropdown"><a class="dropdown-toggle" href="{$node->url}" data-toggle="dropdown">{$node->menutext} <b class="caret"></b></a>

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

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

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

{/if}

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

essexboyracer · **Joined:** Wed Jun 20, 2007 5:40 pm **Posts:** 75

Try the below menu template (based on minimal) for the twitter bootstrap stacked sidebar nav

Code:

{if $count > 0}
<ul class="nav nav-list">
{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}" class="active"{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 class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>


{elseif $node->type == 'sectionheader'}
<li class="nav-header">{$node->menutext}

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

{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}

applejack · **Posted:** Tue Aug 07, 2012 1:32 pm

Hi rpw

Nice responsive site http://ringtonehealthandfitness.triathlonweekly.net/

Did you manage to sort this out as a CMS theme yet as I have just been researching Bootstrap which looks interesting.

I am still not 100% convinced yet about responsive design as I have yet to come across one for a large site which deals with having a substantial number of second and third level links. If anyone know of any then I would be interested to see how they deal with the navigation.

uniqu3 · **Posted:** Tue Aug 07, 2012 2:48 pm

@applejack did you look at Simplex theme which comes with 1.11, navigation is handled there with JS.

But responsible layouts itself depend on Project it is a solution for smaller sites and single level navigation but i would go with a hybrid of mobile detection and responsive design when it comes to larger sites.

applejack · **Posted:** Tue Aug 07, 2012 3:10 pm

Hi Uniqu3

Thanks. I have been doing a lot of research recently on such things as grid systems, HTML5 and CSS3 frameworks.

As it such a jungle out there with so many options I would be interested to know if you or anyone else have any preferences in regard to these?

Re: but i would go with a hybrid of mobile detection and responsive design when it comes to larger sites.

Quite which is one reason why I am late to the responsive party as most of the sites I do are corporate and quite a bit larger than a "standard" responsive site as well as requiring old browser compatibility.

Twitter Boostrap and Smarty Menu

Who is online