Help with converting Bootstrap Menu

[fearmydesign]

Hello everyone. I am trying to convert a Bootstrap template into a functional CMS Made Simple. I think I have almost everything working except (of course) for the menu. Actually it is working... but it's the sub-menus (childs) and sub sub menus that don't want to coorperate with me.

I did look around of course as always, and I found several useful tips which got me to where I am now. I also found this thread where Uniq3 posted the same exact bootstrap template for download (xml). I didn't want to download, because I really wanted to take the time to understand how to customize the menu on my own.

This thread: http://forum.cmsmadesimple.org/viewtopi ... nu#p300340

Below is the simple html code from the Bootstrap template I am trying to convert over to CMSMS menu:

Code: Select all

              <ul class="nav navbar-nav">

                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>

                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                  </ul>

                </li>

              </ul>

...And here is my CMSMS menu template so far... I just can't figure out how to get the sub menus (childs) to work properly, and child/child menus below that:

Code: Select all

{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}
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{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 or $node->current == true}
  {assign var='classes' value='active'}
  {if $node->parent == true}
    {assign var='classes' value='dropdown active'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' dropdown'}
  {/if}

  <li class="{$classes}"><a class=""
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li class=""><a class=""><span class="sectionheader">{$node->menutext}</span><b class="caret"></b></a>
{elseif $node->type == 'sectionheader'}
  <li><a><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
  <li style="list-style-type: none;"> <hr class="menu_separator" />
{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" data-toggle="dropdown"
{else}
  <li>
  <a
{/if}

{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
 {if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>

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

</li>
</ul>
</div>
{/if}

...And here is the link to the working site:
http://cicounters.com/
...click on the "About us" menu item, and the dropdown shows correctly, but try clicking on both links... only one works, than the other doesn't, and if you click more the dropdown stops showing...

I am using the latest version of CMSMS 1.11.9 and of course the latest of Bootstrap 3.0.0

I would greatly appreciate someone helping me figure this out or point out what I can try/change/modify. Thank you in advance

[calguy1000]

I did some googling. bootstrap requires an HTML5 doctype and header.

if the rest of the code validates, and looks correct, changing the template to HTML5 may do the trick.

reference: http://stackoverflow.com/questions/1076 ... ample-work

[fearmydesign]

I did some googling. bootstrap requires an HTML5 doctype and header.

if the rest of the code validates, and looks correct, changing the template to HTML5 may do the trick.

reference: http://stackoverflow.com/questions/1076 ... ample-work

Thanks Calguy, I actually forgot to change that back but it's not the problem I am afraid. I believe its something to do with the way I am building the Menu Template in CMSMS... I actually took the CSS menu provided with CMSMS and modified it... its just the child items not working correctly... don't know...

Thank you

[fearmydesign]

Nope! I can't get this... I can't get my html to print the correct way by modifying the Menu Template. I don't understand the code... My html wants to create an extra <li class="dropdown"> + an extra <ul class="dropdown-menu">... and I have no clue how to remove them from the menu. Anyways, here is the html currently printing:

Code: Select all

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
  
  <li class="active"><a class="active"  href="http://cicounters.com/"><span>Home</span></a>

</li>

  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"  href="http://cicounters.com/about-countertops"><span>About us</span></a>

<ul class="dropdown-menu">

  <li><a  href="http://cicounters.com/about-countertops/test"><span>test</span></a>

</li>

<!-- EXTRA class on li item HERE -->
  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"  href="http://cicounters.com/about-countertops/quality"><span>Quality</span></a>

<!-- EXTRA ul HERE -->
<ul class="dropdown-menu">

  <li><a  href="http://cicounters.com/about-countertops/quality/extension"><span>Extension</span></a>

</li></ul></li></ul>
</li>

  <li><a  href="http://cicounters.com/test-2"><span>test</span></a>

</li>

  <li><a  href="http://cicounters.com/another"><span>Another</span></a>

</li>
</ul>
</div>

I modified the menu template a bit (below). If you roll your mouse over the "About us" and click, the menu pops up, and if you roll-over 'Quality', the correct link shows up on the browser footer... but you can't click on it.

Code: Select all

{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}
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{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 or $node->current == true}
  {assign var='classes' value='active'}
  {if $node->parent == true}
    {assign var='classes' value='dropdown'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}

  <li class="{$classes}"><a class="{$classes}" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li class=""><a class=""><span class="sectionheader">{$node->menutext}</span></a> {elseif $node->type == 'sectionheader'}
  <li><a><span class="sectionheader">{$node->menutext}</span></a> {elseif $node->type == 'separator'}
  <li style="list-style-type: none;"> <hr class="menu_separator" /> {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" data-toggle="dropdown" {else}

  <li><a {/if}
{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
 {if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>

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

</li>
</ul>
</div>
{/if}

Its probably the fact that I don't understand the menu template code, but if anyone can offer any help, I would greatly appreciate it. Thank you

[calguy1000]

I spent an hour or two on this a while ago, without success. I know it can be done, just didn't finish it myself either.

I'll try to take a stab tonite. I have site I could use it on.

[calguy1000]

Heh, think I got it. Currently being tested.

Notes though.

1: Bootstrap 3 doesn't support more than 2 levels by default
2: Bootstrap 3 doesn't support hovering to activate the dropdowns by default
(this iis prolly because some mobile devices don't support the hover)
so pages with children we behave like sectionheaders.

[Dr.CSS]

I got it to work but the top menu parents need to be section headers and it will only take/use 2 level menus, no 3rd level menu items show...

[calguy1000]

This is the template I came up with... which works (with Bootstraps limitations).

Code: Select all

{* Note1: bootstrap v3 does not natively support more than 2 levels of nav so call with number_of_levels=2 for performance *}
{* Note2: add the loadprops=0 param for performance, this template does not need extended params *}
{* Note3: Pages with children will behave like section headers, and not be navigable.. this is also default behavior with boostrap v3, investigate the css to activate the dropdown on hover instead of click *}

{if $count > 0}
<ul class="nav navbar-nav">
{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}

  {$classes=''}
  {if $node->parent == true or $node->current == true}
    {$classes='active'}
    {if $node->parent== true}{$classes=$classes|cat:' parent'}{/if}
  {/if}

  {if $node->type == 'sectionheader'}
    {if $node->haschildren == true}
      <li class="dropdown {$classes}"><a class="dropdown-toggle {$classes}" data-toggle="dropdown"><span>{$node->menutext}</span></a>
    {else}
      <li class="nav-header">{$node->menutext}</li>
    {/if}
  {elseif $node->type == 'separator'}
    <li style="divider">
  {elseif $node->haschildren == true}
    <li class="dropdown {$classes}"><a class="dropdown-toggle {$classes}" data-toggle="dropdown" {if $node->target}target="{$node->target}" {/if}
    href="{$node->url}"><span>{$node->menutext}</span></a>
  {else}
    <li class="{$classes}"><a class="{$classes}" {if $node->target}target="{$node->target}" {/if}
    href="{$node->url}"><span>{$node->menutext}</span></a>
  {/if}

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

</li>
</ul>
{/if}

[rotezecke]

Thanks for sharing.

[uniqu3]

I've just found out that Bootstrap does support more than 2 menu levels … I don't know if anyway is willing/able to expand on Calguys code (above) to make this work (as I can't) - but here's a demo of it in action:

http://www.bootply.com/66089

Calguy was talking about Bootstrap 3, your sample is Bootstrap 2 and yes with BS2 it works http://www.i-arts.eu/bootstrap/