Page 1 of 1
[SOLVED] Can I get Menu Manager to alter the CSS of a nav menu?
Posted: Mon Jul 19, 2010 9:01 pm
by 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
Re: Can I get Menu Manager to alter the CSS of a nav menu?
Posted: Wed Jul 21, 2010 3:52 pm
by simon.romin
Any ideas guys?
Is there is a way to alter the CSS from the Menu Manager?
Romano
Re: Can I get Menu Manager to alter the CSS of a nav menu?
Posted: Wed Jul 21, 2010 4:08 pm
by uniqu3
Hi,
it would help to see how you are using your MenuManager Template now, how you call the Menu in your template etc.
Re: Can I get Menu Manager to alter the CSS of a nav menu?
Posted: Thu Jul 22, 2010 9:25 am
by 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!
Re: Can I get Menu Manager to alter the CSS of a nav menu?
Posted: Thu Jul 22, 2010 9:57 am
by 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.
Re: Can I get Menu Manager to alter the CSS of a nav menu?
Posted: Thu Jul 22, 2010 2:21 pm
by 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
Re: Can I get Menu Manager to alter the CSS of a nav menu?
Posted: Thu Jul 22, 2010 3:02 pm
by 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
Re: Can I get Menu Manager to alter the CSS of a nav menu?
Posted: Thu Jul 22, 2010 3:42 pm
by 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