LAYOUT MENU

[giapippo]

hello
I configured the menu using this structure for bootstrap3

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 id="jx-main-menu" class="menu">
{foreach from=$nodelist item=node}
  {if $node->depth > $node->prevdepth}
    {repeat string='<ul class="submenu">' 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}

but I have a problem with an item that you do not see

here is the template code to be converted:

Code: Select all

 <ul id="jx-main-menu" class="menu">
                                <!-- Item 1 -->
                              [color=#FF0000]  <li class="with-sub">[/color]
                                    <a href="index.html">Home</a>
            
                                    <ul class="submenu">                                
                                        <li><a href="index.html">Home 1</a></li>
                                        <li><a href="home-2.html">Home 2</a></li>
                                        <li><a href="home-3.html">Home 3</a></li>
                                        <li><a href="home-4.html">Home 4</a></li>
                                        <li><a href="home-5.html">Home 5</a></li>
                                        <li><a href="home-6.html">Home 6</a></li>
                                        <li><a href="home-7.html">Home 7</a></li>                    
                                    </ul>
                                </li>
            
                                <!-- Item 2 -->
                                <li class="with-sub">
                                    <a href="#">Features</a>
            
                                    <ul class="submenu">                                
                                        <li><a href="headers.html">Headers</a></li>
                                        <li><a href="footers.html">Footers</a></li>                    
                                    </ul>
                                </li>

where I post the item <li class="with-sub">

thanks for your help

[Dr.CSS]

Add it to the part that determines if it has children...