[SOLVED] CMSMS 2.0.1.1 Navigator Template for Bootstrap 3

[mr.bacan]

Hi all, I've been struggling to get a working menu template to use with Bootstrap 3. I'm a designer and have no programming skills nevertheless I have found most answers to past inquiries in the forums but even though there are a couple of posts about similar questions, none seems to work for me, or at least I have not been able to do it myself.

My menu code is like this...

Code: Select all

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	<ul class="nav navbar-nav navbar-right">
		<li><a href="#" class="active">Inicio</a></li>
		<li class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Nosotros<span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="#">Historia</a></li>
				<li><a href="#">DNA</a></li>
				<li><a href="#">Servicios</a></li>
				<li><a href="#">Canales</a></li>
			</ul>
		</li>
		<li class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Representaciones<span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="#">Farmacéuticos</a></li>
				<li><a href="#">Bebidas Alcohólicas</a></li>
				<li><a href="#">Comestible</a></li>
				<li><a href="#">Escolar</a></li>
				<li><a href="#">No Comestibles</a></li>
				<li><a href="#">Químicos Industriales</a></li>
			</ul>
		</li>
		<li><a href="#">Noticias</a></li>
		<li><a href="#">Contacto</a></li>
	</ul>
</div>

The only template that seems to be at least showing something is (Edited by me)...

Code: Select all

{if !isset($depth)}{$depth=0}{/if}
<ul class="nav navbar-nav navbar-right">
{if isset($nodes)}
{strip}
	{foreach $nodes as $node}
			{if $node->children_exist == true}
			<li class="dropdown">
				<a href="{$node->url}" class="dropdown-toggle {$classes}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{$node->menutext}<span class="caret"></span></a>
			</li>
		{elseif $node->current == true}
			<li>
				<a class="active" href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
			</li>
		{else}
			<li>
				<a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
			</li>
		{/if}
	{/foreach}
{/strip}
{/if}
</ul>

But obviously it's not near to be complete since it is only showing main links, but not submenus nor activating the dropdown feature. The demo page is http://www.medimexsa.com/webdemo-2015/

Does anyone has a working template for Navigator using dropdown menus on Bootstrap 3?

Thanks in advance for any help.

[calguy1000]

You do realize that:

- The Navigator module works differently than MenuManager... the templates are not compatible.
- There is full documentation for the Navigator module in the docs site and in the MenuManager.
- There are three or four sample templates included with Navigator that you can easily review for reference, and copy+change to style.

It really isn't that difficult.

[moorezilla]

Hey Bacan... you ever get this sorted? I have to take a look at repurposing some menu manager bootstrap menus for the new navigator in a few weeks, so if you have a working template and care to share, that'd be great... save me some time. Otherwise, I'll share what I come up with after I take a look at the changes in navigator.

[moorezilla]

Ok... REALLY rough cut at a 2 level bootstrap 3 template in the new navigator module. Apologies if this doesn't belong here; just leaving it in case it's of use for anyone else getting started with the new nav. Mileage may vary and there's no doubt a better way of doing this and incorporating the class logic... corrections/suggestions welcome and encouraged!

Code: Select all

{* adapted from cssmenu included in distribution of cmsms 2.1 *}


{if !isset($depth)}{$depth=0}{/if}
{strip}
{if $depth == 0}
<ul class="nav navbar-nav">
<!--top level-->
{else}
<ul class="dropdown-menu">
{/if}

{$depth=$depth+1}
{foreach $nodes as $node}

  {* build the menu item from the node *}
  
  {if $node->type == 'sectionheader' && $node->haschildren == true}
       
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">{$node->menutext}</a></li>
        {elseif $node->type == 'sectionheader' && $node->haschildren == false}}
    <li class="nav-header"><a href="{$node->url}">{$node->menutext}</a></li>
       
      {if isset($node->children)}
        {include file=$smarty.template nodes=$node->children}
      {/if}
    </li>
  {else if $node->type == 'separator'}
    <li style="list-style-type: none;"><hr class="menu_separator"/></li>
  {else}
    {* regular item *}
    <li>
      <a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
      {if isset($node->children)}
        {include file=$smarty.template nodes=$node->children}
      {/if}
    </li>
  {/if}

{/foreach}
{$depth=$depth-1}

{if $depth == 0}
{/if}
</ul>
{/strip}

[mr.bacan]

Sorry for the delay on my response Moorezilla, I've been out of my country.
Thanks to Calguys guidance I managed to solve the menu issue.
Here's the template I finally used:

Code: Select all

{* Main Menu *}
{if !isset($depth)}{$depth=0}{/if}
{strip}

{if $depth == 0}
<ul class="nav navbar-nav navbar-right">
{else}
<ul class="dropdown-menu">
{/if}

{$depth=$depth+1}
{foreach $nodes as $node}
  {* setup classes for the anchor and list item *}
  {$liclass=[]}
  {$aclass=[]}

  {* the first child gets a special class *}
  {if $node@first && $node@total > 1}{$liclass[]='first_child'}{/if}

  {* the last child gets a special class *}
  {if $node@last && $node@total > 1}{$liclass[]='last_child'}{/if}

  {if $node->current}
    {* this is the current page *}
    {$liclass[]='menuactive'}
    {$aclass[]='menuactive'}
  {/if}
  {if $node->has_children}
    {* this is a parent page *}
    {$liclass[]='dropdown'}
    {$aclass[]='dropdown-toggle'}
  {/if}
  {if $node->parent}
    {* this is a parent of the current page *}
    {$liclass[]='menuactive'}
    {$aclass[]='menuactive'}
  {/if}

  {* build the menu item from the node *}
  {if $node->type == 'sectionheader'}
    <li class='{implode(' ',$liclass)}'><a{if count($aclass) > 0} class="{implode(' ',$aclass)}"{/if} data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{$node->menutext}<span class="caret"></span></a>
      {if isset($node->children)}
        {include file=$smarty.template nodes=$node->children}
      {/if}
    </li>
  {else if $node->type == 'separator'}
    <li style="list-style-type: none;"><hr class="menu_separator"/></li>
  {else}
    {* regular item *}
    <li class="{implode(' ',$liclass)}">
      <a{if count($aclass) > 0} class="{implode(' ',$aclass)}"{/if} href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>
      {if isset($node->children)}
        {include file=$smarty.template nodes=$node->children}
      {/if}
    </li>
  {/if}
{/foreach}
{$depth=$depth-1}
</ul>

{if $depth == 0}
<div class="clearb"></div>
</div>{* menuwrapper *}
{/if}
{/strip}

It works great with Bootstrap 3. As I see you also found your solution.

[hexdj]

How are you guys loading Navigator?
Any specific properties in your Navigator smarty call? I can't get any of your templates to work.

It does load the top menu but dropdowns do not appear.

CMS 2.1.1
Bootstrap 3.3.6