[SOLVED] Can I get Menu Manager to alter the CSS of a nav menu?

[simon.romin]

Hi all,

On my template I have three levels of navigation (see attached image).

However, not all menu items have children.

When I visit a page that has no children, the page looks very strange with random sub menu divs sitting around with nothing in them.

I want to hide these sub menus when there are no child links.

Please can someone tell me how to set CSS property display: none; on sub navigation divs that have no children?

This will be the easiest way to hide the div without messing up my template.

Thanks,

Romano

[simon.romin]

Any ideas guys?

Is there is a way to alter the CSS from the Menu Manager?

Romano

[uniqu3]

Hi,

it would help to see how you are using your MenuManager Template now, how you call the Menu in your template etc.

[simon.romin]

Hi uniqu3, thanks for your reply.

I am using the standard menu manager template. This is what it looks like:

Code: Select all

{* CSS classes used in this template:
.activeparent - 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 *} 

{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 and $node->haschildren == true)}
<li class="menuactive"> <!-- <a class="menuactive" href="{$node->url}"> --> <span>{$node->menutext}</span>

{elseif $node->haschildren == true 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="currentpage"><span>{$node->menutext}</span>

{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}

I was thinking about adding something like this:

{elseif $node->haschildren == false}
add CSS here to set subnav display: none;

This would be easiest because it wouldn't ruin my current template.

Please let me know if there is anything else you need to know!

[uniqu3]

Why are you thinking so complicated with display:none;?

In your Template/Layout of the page you can call the menu twice.
Assuming you have it wrapped with div's for example like this:

Code: Select all

<div class="mainNavigation">
 {menu}
</div>

Now you can do following:

Your page Template:

{menu number_of_levels='1'}


{menu template='subLevel' start_level='2' number_of_levels='1'}

Now you copy your MenuManager Template and name it "subLevel" and change it like this:

{if $count > 0}



{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}


{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
{$node->menutext}

{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
url}">{$node->menutext}

{elseif $node->current == true}
{$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}


{else}
url}">{$node->menutext}

{/if}

{/foreach}
{repeat string="" times=$node->depth-1}


{/if}

as you can see above the only thing i added is but using it in the menumanager you do not need display:none; since if there is no sub level it will not be displayed and you have the same effect as with display:none;

There would also be other ways but i think this is the simplest understandable way for you after reading your other posts.

[simon.romin]

Ahhh, I see now!

This makes logical sense, but the sub nav div still isn't disappearing when there are no children.

This is what the navigation area looks like in my template:

Code: Select all

<div id="navWrapper">
	<div id="navContent">{menu start_level='1' number_of_levels='1'}</div>
</div>

<div id="navSubWrapper">
	<div id="navSubContent">{menu template='navSub' start_level='2' number_of_levels='1'}</div>
</div>

I created a new menu template called 'navSub' and used the same code you provided, but still no joy.

Can you suggest anything else?

You are a huge help and a credit to these forums, and your explanation has helped me understand CMSMS more!

Thanks,

Romano

[uniqu3]

Simon i didn't suggest to use my code exactly as written above.

open your MenuManager "navSub" template and place your div inside it.

{if $count > 0}



{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}


{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
{$node->menutext}

{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
url}">{$node->menutext}

{elseif $node->current == true}
{$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}


{else}
url}">{$node->menutext}

{/if}

{/foreach}
{repeat string="" times=$node->depth-1}



{/if}

And your template like this:

{menu start_level='1' number_of_levels='1'}


REMOVE THE RED PART BECAUSE IT IS PLACED IN YOUR MENUMANAGER TEMPLATE
{menu template='navSub' start_level='2' number_of_levels='1'}
REMOVE THE RED PART

[simon.romin]

AMAZING WORK UNIQU3!

That works an absolute dream, you a credit to these forums.

Not only have you solved my problem, but you have explained to everyone in practical terms how to use Menu Manager, and now I can get cracking with template!

Thank you again.

Simon