:SOLVED: Submenu has child as current when on a parent page

For questions and problems with the CMS core. This board is NOT for any 3rd party modules, addons, PHP scripts or anything NOT distributed with the CMS made simple package itself.
Post Reply
SinJ
New Member
New Member
Posts: 6
Joined: Fri Aug 07, 2015 8:35 am

:SOLVED: Submenu has child as current when on a parent page

Post by SinJ »

Hi,

I'm running CMS Made Simple 1.12.
I'm using PHP 5.5.23 and MySQL 5.5.42.
This is all working with Apache running on Linux.

I have a problem with submenu currents as below:

My main navigation is this:
Link 1
Link 2
Link 3 (includes submenu)
Link 4
Link 5

Then I have submenu under Link 3 like this (all links shown):
Link 1
Link 2
Link 3 - Link 3.1 - Link 3.1.1 - Link 3.1.1.1
-------------------------- Link 3.1.1.2
-------------------------- Link 3.1.1.3
---------------- Link 3.1.2
---------------- Link 3.1.3
------- Link 3.2
------- Link 3.3
Link 4
Link 5

If you can see what I mean.


The page under Link 3 doesn't have content, it'a a link direct to page 3.1. When I'm at page 3.1. I should see the submenu links like this:

Link 3.1 - Link 3.1.1 - Link 3.1.1.1
------------------- Link 3.1.1.2
------------------- Link 3.1.1.3
-------- Link 3.1.2
-------- Link 3.1.3
- Link 3.2
- Link 3.3

As you can see, there should be only the page and it's parents as current where I am. If I would be at the page 3.1.1, menu should look like this:
Link 3.1 - Link 3.1.1 - Link 3.1.1.1
------------------- Link 3.1.1.2
------------------- Link 3.1.1.3
-------- Link 3.1.2
-------- Link 3.1.3
- Link 3.2
- Link 3.3



Right now when I'm at page 3.1 or at the page 3.1.1, the menu looks like this (looks similar on both pages):
Link 3.1 - Link 3.1.1 - Link 3.1.1.1
------------------- Link 3.1.1.2
------------------- Link 3.1.1.3
-------- Link 3.1.2
-------- Link 3.1.3
- Link 3.2
- Link 3.3

What might made the parent's child link to be also current?

The code (layout):

Code: Select all

<nav class="left">

{menu start_level="2" number_of_levels="3" template="Xxxxx-menu-left"}

</nav>
The code (Xxxxx-menu-left):

Code: Select all

{* CSS classes used in this template:
.current-left - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{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}
<ul>
{foreach from=$nodelist item=node}

{if $node->depth > $node->prevdepth}
{repeat string="<ul>" 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='current-left'}
  {if $node->parent == true}
    {assign var='classes' value='current-left menuparent'}
  {/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}" href="{$node->url}"><span>{$node->menutext}</span></a> 

{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->current == true}
<li class="current-left"><h3><span>{$node->menutext}</span></h3>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Thank you so much!
Last edited by SinJ on Fri Aug 28, 2015 10:14 am, edited 1 time in total.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Submenu has child as current when on a parent page

Post by velden »

A link to the page or the html code of the menu would be very helpful.
SinJ
New Member
New Member
Posts: 6
Joined: Fri Aug 07, 2015 8:35 am

Re: Submenu has child as current when on a parent page

Post by SinJ »

Of course! ::)

Code of the menu left:

Code: Select all

<nav class="left">
      <ul>
        <li><a href="link.html"><span>Active link text</span></a>
          <ul>
            <li><a href="link.html">Link text</a></li>
            <ul>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
            </ul>
            <li><a href="link.html">Link text</a></li>
          		  <ul>
            	  <li><a href="link.html">Link text</a></li>
           	 </ul>
          </ul>
          <ul>
            <li><a href="link.html">Link text</a></li>
            <ul>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
            </ul>
          </ul>
        </li>
      </ul>
      <ul>
        <li><a href="link.html">Link text</a>
          <ul>
            <li><a href="link.html">Link text</a></li>
            <ul>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
            </ul>
          </ul>
        </li>
      </ul>
      <ul>
        <li><a href="link.html>Link text</a>
          <ul>
            <li><a href="link.html">Link text</a></li>
            <ul>
              <li><a href="link.html">Link text</a></li>
            </ul>
          </ul>
          <ul>
            <li><a href="link.html">Link text</a></li>
            <ul>
              <li><a href="link.html">Link text</a></li>
            </ul>
          </ul>
          <ul>
            <li><a href="link.html">Link text</a></li>
            <ul>
              <li><a href="link.html">Link text</a></li>
            </ul>
          </ul>
          <ul>
            <li><a href="link.html">Link text</a></li>
            <ul>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
              <li><a href="link.html">Link text</a></li>
            </ul>
          </ul>
        </li>
      </ul>
      <ul>
        <li><a href="link.html">Link text</a>
          <ul>
            <li><a href="link.html">Link text</a></li>
            <ul>
              <li><a href="link.html">Link text</a></li>
            </ul>
          </ul>
          <ul>
            <li><a href="link.html">Link text</a></li>
            <ul>
              <li><a href="link.html">Link text</a></li>
            </ul>
          </ul>
        </li>
      </ul>
      <ul>
        <li><a href="link.html">Link text</a>
          <ul>
            <li><a href="link.html">Link text</a></li>
            <ul>
              <li><a href="link.html">Link text</a></li>
            </ul>
          </ul>
        </li>
      </ul>
      <ul>
        <li><a href="link.html">Link text</a>
          <ul>
            <li><a href="link.html">Link text</a></li>
            <ul>
              <li><a href="link.html">Link text</a></li>
            </ul>
          </ul>
        </li>
      </ul>
    </nav>
I think it has to do something with the main menu link (in the top) because it's only link to another page.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Submenu has child as current when on a parent page

Post by velden »

I don't see any class attribute (except for the class="left").

So this can't be right. No way the browser could know what part is active/current (except if you're using JS for that and you didn't mention that and it is not likely).
SinJ
New Member
New Member
Posts: 6
Joined: Fri Aug 07, 2015 8:35 am

Re: Submenu has child as current when on a parent page

Post by SinJ »

Thank you veiden for reply! So it is not enough to use class .current-left in the menu code? Where I should add this class element?
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Submenu has child as current when on a parent page

Post by velden »

I don't know what you're doing exactly but the pasted html output is not output from Menu Manager.
SinJ
New Member
New Member
Posts: 6
Joined: Fri Aug 07, 2015 8:35 am

Re: Submenu has child as current when on a parent page

Post by SinJ »

Menu Manager code is as below. There I'm designed how the current link should look like with . current-left, .menuparent and .parent.

Code: Select all

{* CSS classes used in this template:
.current-left - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{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}
<ul>
{foreach from=$nodelist item=node}

{if $node->depth > $node->prevdepth}
{repeat string="<ul>" 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='current-left'}
  {if $node->parent == true}
    {assign var='classes' value='current-left menuparent'}
  {/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}" href="{$node->url}"><span>{$node->menutext}</span></a> 

{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->current == true}
<li class="current-left"><h3><span>{$node->menutext}</span></h3>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
The current link's design works fine, but the first page with the submenu (left) shows the first link and it's child as current. Even I am at the parent page.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Submenu has child as current when on a parent page

Post by velden »

SinJ wrote:The current link's design works fine, but the first page with the submenu (left) shows the first link and it's child as current. Even I am at the parent page.
I would like to see that. Not that you tell me so or paste html you would like to see, but the actual result.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Submenu has child as current when on a parent page

Post by Dr.CSS »

This is something we would need a link to the actual site to figure out what is happening and what it outputs, said so in a previous post...
SinJ
New Member
New Member
Posts: 6
Joined: Fri Aug 07, 2015 8:35 am

Re: Submenu has child as current when on a parent page

Post by SinJ »

Thank you for your time and replies! Sorry for letting you only see the code. But unfortunately the information on the site is currently secret so I don't have the opportunity to publish or show the pages.

At this point I have to take off the current style, meaning a visitor can't see on the navigation where he is at the moment.
SinJ
New Member
New Member
Posts: 6
Joined: Fri Aug 07, 2015 8:35 am

Re: Submenu has child as current when on a parent page

Post by SinJ »

Fortunately the problem was simple! I remove .parent class from CSS and now the navigation works fine!

Of course if I could have the opportunity to show you the site I would have got the answer right away. :)
Post Reply

Return to “CMSMS Core”