Menu Navigator Bootstrap level 3

[otik]

Hi all,
I'm the beginner with CMSMS and I look for a complex navigator menu with possibilities dropdown and megamenu setting. I see your solutions a nav menu for 2 level dropdown but I need 3 level. This concern depth=2 and add class dropdown dropdown-submenu for tag UL-> Li. When depth=0 ist possible liclass change for default menu item?
With so much thank for an answer.

Code: Select all

<li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               About something
            </a>

            <ul class="dropdown-menu">
                <li class="dropdown dropdown-submenu">
                    <a href="#" class="dropdown-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Level 2</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="../../../html/default/pages/about-1.html">Level3</a></li>
                        
                    </ul>
                </li>

[DIGI3]

You have the $depth variable to work with, so you can easily change classes or whatever you like:

Code: Select all

{if $depth==3}do this{else}do that{/if}

[otik]

Thank you very much for your answer, but this should be needed maybe little more explanation on the example below.

My target is understating this code and learn writing any structure from the drop-down menus. This work for Simplex menu or some CSS menu.

Code: Select all

{* simple navigation *}
{* note, function can only be defined once *}
{* 
  variables:
  node: contains the current node.
  aclass: is used to build a string containing class names given to the a tag if one is used
  liclass: is used to build a string containing class names given to the li tag.
*}


{function name=Nav_menu depth=1}{strip}
{if $depth ==0}
    <ul class="nav navbar-nav">
    {else}
    <ul class="dropdown-menu">
{/if}

{if $depth ==3}
    <li class="dropdown dropdown-submenu">
    {else}
    <li class="">
{/if}

  {foreach $data as $node}
    {* setup classes for the anchor and list item *}
    {assign var='liclass' value='menudepth'|cat:$depth}
    {assign var='aclass' value='dropdown-item'}

    {* the first child gets a special class *}
    {if $node@first && $node@total > 1}{assign var='liclass' value=$liclass|cat:' first_child'}{/if}

    {* the last child gets a special class *}
    {if $node@last && $node@total > 1}{assign var='liclass' value=$liclass|cat:' last_child'}{/if}

    {if $node->current}
      {* this is the current page *}
      {assign var='liclass' value=$liclass|cat:' menuactive'}
      {assign var='aclass' value=$aclass|cat:' menuactive'}
    {/if}

    {if $node->parent}
      {* this is a parent of the current page *}
      {assign var='liclass' value=$liclass|cat:' menuactive menuparent'}
      {assign var='aclass' value=$aclass|cat:' menuactive menuparent'}
    {/if}

    {if $node->children_exist}
      {assign var='liclass' value=$liclass|cat:' parent'}
      {assign var='aclass' value=$aclass|cat:' parent'}
    {/if}

    {* build the menu item node *}
    {if $node->type == 'sectionheader'}
      <li class='sectionheader {$liclass}'><span>{$node->menutext}</span>
        {if isset($node->children)}
          {Nav_menu data=$node->children depth=$depth+1}
        {/if}
      </li>
    {else if $node->type == 'separator'}
      <li class='separator {$liclass}'><hr class='separator'/></li>
    {else}
      {* regular item *}
        
      {if isset($node->children)}  
      <li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{$node->menutext}<span class="caret"></span></a>
          {Nav_menu data=$node->children depth=$depth+1}
      </li>
        {else}
        <li class=""><a class="{$aclass}" href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a></li>
      {/if}
     
    
        
        
    {/if}
  {/foreach}
</ul>
{/strip}{/function}

{if isset($nodes)}
{Nav_menu data=$nodes depth=0}
{/if}

Html for 3 level nav menu

Code: Select all

<ul class="dropdown-menu show">
                <li class="dropdown dropdown-submenu">
                    <a href="#" class="dropdown-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="../../../html/default/pages/about-1.html">About 1</a></li>
                    </ul>
             </ul>

[DIGI3]

You just need to break it down into manageable steps. For example, where you have

Code: Select all

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

You can make it

Code: Select all

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

And then use a similar if/else in the {* regular item *} area.

There are other ways to do it, once you start doing a few tweaks and examining the source code it produces, you'll get a feel for how the Navigator recursion works.