• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 10 posts ] 
Author Message
 Post subject: Twitter Boostrap and Smarty Menu
PostPosted: Tue Jun 12, 2012 4:02 pm 
Offline
New Member

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>



Top
 Profile  
 
 Post subject: Re: Twitter Boostrap and Smarty Menu
PostPosted: Wed Jun 13, 2012 6:06 pm 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 11812
Location: Arizona
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...

_________________
Extensions » Modules/Tags click the name of the module/tag or Help to the right to get its parameters.
Right click and view source is a great way to see what you have to work with.
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
Image


Top
 Profile  
 
 Post subject: Re: Twitter Boostrap and Smarty Menu
PostPosted: Wed Jun 13, 2012 6:35 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Wed Nov 15, 2006 12:42 pm
Posts: 154
Location: London, UK
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!)


Top
 Profile  
 
 Post subject: Re: Twitter Boostrap and Smarty Menu
PostPosted: Fri Jun 15, 2012 3:37 pm 
Offline
New Member

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,
:)


Top
 Profile  
 
 Post subject: Re: Twitter Boostrap and Smarty Menu
PostPosted: Fri Jun 15, 2012 3:38 pm 
Offline
New Member

Joined: Tue Jun 12, 2012 3:56 pm
Posts: 6
Hmm... posted a reply, and its not shown up?


Top
 Profile  
 
 Post subject: Re: Twitter Boostrap and Smarty Menu
PostPosted: Thu Jul 12, 2012 1:37 pm 
Offline
Forum Members
Forum Members

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}



Top
 Profile  
 
 Post subject: Re: Twitter Boostrap and Smarty Menu
PostPosted: Tue Jul 17, 2012 6:58 pm 
Offline
Forum Members
Forum Members

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}


Top
 Profile  
 
 Post subject: Re: Twitter Boostrap and Smarty Menu
PostPosted: Tue Aug 07, 2012 1:32 pm 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 860
Location: London
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.


Top
 Profile  
 
 Post subject: Re: Twitter Boostrap and Smarty Menu
PostPosted: Tue Aug 07, 2012 2:48 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Tue Aug 12, 2008 9:30 pm
Posts: 1979
Location: Feldkirchen in Kärnten, Austria
@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.

_________________
CMSMS Blog - I do this!
Forge profile
Github profile
Twitter
=============================================
Support CMSMS


Top
 Profile  
 
 Post subject: Re: Twitter Boostrap and Smarty Menu
PostPosted: Tue Aug 07, 2012 3:10 pm 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 860
Location: London
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 10 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Arvixe - A CMSMS Partner