expandable menu for both sectionheaders and parent/child

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
miss_d_bus
Forum Members
Forum Members
Posts: 121
Joined: Sun May 01, 2005 4:27 pm

expandable menu for both sectionheaders and parent/child

Post by miss_d_bus »

I am in the process of converting a site over to CMSMS but having a problem with its vertical menu.
The site's nav's top level menu items are a mixture of both sectionheaders and pages - some with children, some not. When one clicks on the top level items where there are children, they list below and the same when the top level is a section header.

The site I am copying over has it so that the top level menu items are clickable to show the children below regardless of whether it is a page in its own right.
I wonder if anyone could point me in the right direction of a menu template that could do this please? I only seem to be able to get either the sectionheader ones working or the parent pages - not both together.
Thanks!
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: expandable menu for both sectionheaders and parent/child

Post by Dr.CSS »

Would need to see an example in action to tell how to change/make a menu template...
miss_d_bus
Forum Members
Forum Members
Posts: 121
Joined: Sun May 01, 2005 4:27 pm

Re: expandable menu for both sectionheaders and parent/child

Post by miss_d_bus »

Thanks for your reply.
I had another look at the orginal site with fresh eyes. It appears now that they do not use "section headers" for the children pages but rather just a blank contents page so that makes it really easy (despite me not findng it ideal to have blank pages at top level to contain children pages but with some top level links being "real" pages!).

Thanks for your time.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: expandable menu for both sectionheaders and parent/child

Post by velden »

I once changed the menu template a little so it creates anchors without href

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}

{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}
<div id="menubar">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' 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='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive 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}" 
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
  <li class="menuparent"><a class="menuparent"><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
  <li><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
  <li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
  <li class="menuparent"><a class="menuparent" 
{else}
  <li>
  <a 
{/if}

{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
 {if $node->target}target="{$node->target}" {/if}
   {if ($node->type != 'sectionheader')}href="{$node->url}"{/if}><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}


Workaround could be to use an 'Internal page link' for the section header, pointing to the first child.

I also use section header as is in combination with Superfish javascript menu. That takes care of the hover of non-anchor objects. But depends on javascript of course.
I do not have a live example of that one, because the website is not officially online yet (needs approval of customer).

When interessed contact me.
Post Reply

Return to “Layout and Design (CSS & HTML)”