Menu With collpasable sectionHeaders AND visitable content parents?

[Leav]

Hi guys I have and Idea for a Menu for my website: http://www.project-hydra.com/

I was thinking of hacing a Menu like this:

*Content1
*sectionHeader2
*Content3
*Content4


clicking on sectionHeader2 results in this:


*Content 1
*sectionHeader 2
  *Content2.1
  *sectionHeader2.2
*Content 3
*Content 4


so far I have this working, but I also want this functionality:
If you click on content 3 you get the page, content3, displayed and the menu changes to this:


*Content1
*sectionHeader2
*Content3
  *Content3.1
  *sectionHeader3.2
*Content4



so basically:
if a node has children it is clickable.
it will expand to show these children when clicked.
if the node has content (i.e it is not a sectionHeader) the content will be displayed when clicked.

here is my menu code:

{if $count > 0}


{foreach from=$nodelist item=node}

{if $node->depth prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}
{assign var="listopen" value="0"}
{elseif $node->index > 0 && $listopen == 0}

{/if}
{if $node->index == 0}
{assign var="icon" value="house"}
{elseif $node->haschildren == true }
{assign var="icon" value="folder"}
{elseif $node->haschildren == false }
{assign var="icon" value="page"}
{/if}

{if $node->current == true}
{$node->menutext}
{if $node->haschildren == true }

{assign var="listopen" value="1"}
{/if}
{else}
{if $node->haschildren == true && $node->parent != true}
id}');">{$node->menutext}
{else}

id == 15}/{else}{$node->url}{/if}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}
{/if}

{if $node->haschildren == true  && $node->parent != true}
{assign var="listopen" value="1"}
id}" class="expand" style="padding-left:14px;">
{elseif $node->parent == true}
{assign var="listopen" value="1"}

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

{/if}

and you can view the site here with menu:
http://www.project-hydra.com/

currently the functionality I want exists to some extent:
click projects > vehicled > recumbents > failure
and then click on recumbents again (it is a content page).

Can anyone please help me with this? please?
-Leav

[Leav]

I Implemented some new code, I just don't know what to do with sectionheaders:
sometimes they open to:
base/#
and sometimes they act like I want them to....

{if $count > 0}


{foreach from=$nodelist item=node}

{if $node->depth prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}
{assign var="listopen" value="0"}
{elseif $node->index > 0 && $listopen == 0}

{/if}

{if $node->index == 0}
{assign var="icon" value="house"}
{elseif $node->haschildren == true }
{assign var="icon" value="folder"}
{elseif $node->haschildren == false }
{assign var="icon" value="page"}
{/if}


{if $node->current == true}
{$node->menutext}
{if $node->haschildren == true }

{assign var="listopen" value="1"}
{/if}

{else}
{if $node->haschildren == true && $node->parent != true}
{if $node->url == "#"}
id}');">
{$node->menutext}
{else}
id == 15}/{else}{$node->url}{/if}"{if $node->target ne ""} target="{$node->target}"{/if} onClick="javascript:expandcontent('node{$node->id}');">
{$node->menutext}
{/if}
{else}

id == 15}/{else}{$node->url}{/if}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}
{/if}

{if $node->haschildren == true  && $node->parent != true}
{assign var="listopen" value="1"}
id}" class="expand" style="padding-left:14px;">
{elseif $node->parent == true}
{assign var="listopen" value="1"}

{/if}
{/if}

{/foreach}

{repeat string="" times=$node->depth-2}

{/if}

[Leav]

Got it!
But it still has a bug:
it's hard to describe but easy to reproduce:
go here: http://www.project-hydra.com/

click on projects
then on about me
notice that the submenu for projects has collpased. (this is the bug)
now you can click on home again and the submenu for projects has expanded....

any idea on how to stop it from collpasing when going to about me?

-Leav

p.s. here is the new code: (i solved the problem by using the onClick property in the link tags)

{if $count > 0}


{foreach from=$nodelist item=node}

{if $node->depth prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}
{assign var="listopen" value="0"}
{elseif $node->index > 0 && $listopen == 0}

{/if}

{if $node->index == 0}
{assign var="icon" value="house"}
{elseif $node->haschildren == true }
{assign var="icon" value="folder"}
{elseif $node->haschildren == false }
{assign var="icon" value="page"}
{/if}


{if $node->current == true}
{$node->menutext}
{if $node->haschildren == true }

{assign var="listopen" value="1"}
{/if}

{else}
{if $node->haschildren == true && $node->parent != true}
{if $node->type == 'sectionheader'}
id}');">
{$node->menutext}
{else}
id == 15}/{else}{$node->url}{/if}"{if $node->target ne ""} target="{$node->target}"{/if} onClick="javascript:expandcontent('node{$node->id}');">
{$node->menutext}
{/if}
{else}
{if $node->type == 'sectionheader'}
id}');">
{$node->menutext}
{else}
id == 15}/{else}{$node->url}{/if}"{if $node->target ne ""} target="{$node->target}"{/if} onClick="javascript:expandcontent('node{$node->id}');">
{$node->menutext}
{/if}
{/if}

{if $node->haschildren == true  && $node->parent != true}
{assign var="listopen" value="1"}
id}" class="expand" style="padding-left:14px;">
{elseif $node->parent == true}
{assign var="listopen" value="1"}

{/if}
{/if}

{/foreach}

{repeat string="" times=$node->depth-2}

{/if}

[Dr.CSS]

You may want to look at the Users Handbook, Elijah has a few diff. collapsible menus...

http://wiki.cmsmadesimple.org/index.php ... ion_expand

[Leav]

thanks mark, "my" template is a variation on Elijah's template.

But I have expanded it to take care of what I call "ContentParents" content pages which are parents of other pages.

Just have a little bug left...

any idea how to fix it?

thanks!
-Leav