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:** 81

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:** 81

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.

JiiPee · **Joined:** Fri Jan 23, 2009 7:03 pm **Posts:** 81

That essexboyracers first code is almost perfect, it shows also the subpages and they work on computer both full and hidden navigation, but dont seem to work on smart phone and tablet, when navigation is hidden. (Sub pages show up but they don't do anything when clicked)

rpw seems to got it working with phone and tablet though, any idea how he did it?

Heres the demo site

uniqu3 · **Posted:** Tue Jun 11, 2013 10:25 am

For bootstrap Navigation and CMSMS check out TBS Theme http://themes.cmsmadesimple.org/uploads ... S.zip.html
but do yourself a favor and replace TBS DB Stylesheets with static Bootstrap Stylesheets as it is much easier to update with new Bootstrap releases, i delivered Stylesheets with CMSMS DB just for convenience and learning purposes.

elkman · **Joined:** Thu Jan 11, 2007 9:16 pm **Posts:** 212

THANKS!!! This is a fantastic starter theme using Bootstrap. Makes it very easy to extend use of CMSMS.

Have you had a reason or opportunity to use jquery.mobilemenu.js or another jquery menu option for use with CMSMS when Bootstrap isn't used? I have a few clients who prefer the "Select" option type of menu because they see this predominately on website themes and templates they find online.

Is there a tutorial that I may have missed that could help me understand how to convert one of these other jquery mobile scripts for use with CMSMS?

Goran, thanks again for this new theme. It's very helpful to those of us (me

) who are less skilled to better understand and move forward.

Elkman

JiiPee · **Joined:** Fri Jan 23, 2009 7:03 pm **Posts:** 81

Great work with this theme, thanks a lot!

I still have some small issue with the slider though. It looks like it has short delay when starting, maybe the slide change interval? Did I miss something? (you can check the demo link above)

Also those smarty magic's on page templates are new feature for me, they look very usable. Any advice where to find more information how to use those?

Dr.CSS · **Posted:** Mon Jun 17, 2013 4:04 pm

You may want to check into the extra closing div tag at the end of the carousel </div> I think you have one extra of those before the nav buttons...

Twitter Boostrap and Smarty Menu

Who is online