Page 1 of 1

Getting {Navigator} to make a simple <ul><li> list

Posted: Thu Jan 12, 2017 6:32 pm
by Lateralus
Hey everybody,

First of all, I'v been using CMSMS for years now, this week I installed version 2.1.6 and I really like the improvements and new features, thanks everybody for the development.

Now I have a little problem, I'm trying to get this beautiful menu to work: https://www.smartmenus.org

As far as I can understand it, all this menu needs html-wise is a simple unordered list where the very first <ul> has its own id and class, like this:

Code: Select all

<ul id="main-menu" class="sm sm-blue">
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a>
    <ul>
      <li><a href="#">Child1 of Link2</a></li>
      <li><a href="#">Child2 of Link2</a></li>
    </ul>
  </li>
</ul>
I tried to strip the template from CMSMS2 called "Navigator::Navigation". I deleted all the lines that I thought were unnecessary and I ended up with:

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}
<ul id="main-menu" class="sm sm-blue">
  {foreach $data as $node}
   
    {if $node->current}
      {* this is the current page *}
      {assign var='aclass' value=$aclass|cat:'current'}
    {/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 *}
      <li class="{$liclass}">
        <a class="{$aclass}" href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>
        {if isset($node->children)}
          {Nav_menu data=$node->children depth=$depth+1}
        {/if}
      </li>
    {/if}
  {/foreach}
</ul>
{/function}

{if isset($nodes)}
{Nav_menu data=$nodes depth=0}
{/if}
This gives me a menu that works to some extend, but the problem is, the level 2 child <ul> elements again get the id and the class like the first <ul> does. I don't want this. I just want the next <ul> to be without a class or id.

Thanks in advance,

Kind regards,

Johan van Zanten

Re: Getting {Navigator} to make a simple <ul><li> list

Posted: Fri Jan 27, 2017 7:53 pm
by milehigh
Try this:

Code: Select all

{if $depth == 0}
<ul id="main-menu" class="sm sm-blue">
{else}
<ul>
{/if}

Re: Getting {Navigator} to make a simple <ul><li> list

Posted: Sun Jan 29, 2017 11:01 am
by Lateralus
Thank you Milehigh.

In the meantime I hired somebody from CMSMS "hire a dev" and he fixed it, here is the code, it also includes a <li> for my searchbox.

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}
<ul{if $depth==0} id="main-menu" class="sm sm-blue"{/if}>
  {foreach $data as $node}
    {$aclass=''}
    {if $node->current || $node->parent}
      {* this is the current page *}
      {assign var='aclass' value=$aclass|cat:'current'}
    {/if}

    {* build the menu item node *}
    {if $node->type == 'sectionheader'}
      <li class='sectionheader {$liclass}'>{$node->menutext}
        {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 *}
      <li{if $liclass!=''} class="{$liclass}"{/if}>
        <a{if $aclass!=''} class="{$aclass}"{/if} href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
        {if isset($node->children)}
          {Nav_menu data=$node->children depth=$depth+1}
        {/if}
      </li>
    {/if}
  {/foreach}
  {if $depth==0}<li class="li-zoekvenster">
    <div class="zoekvenster">
    {search}
    </div>
  </li>{/if}
</ul>
{/function}

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