Forums / Setup & design / Needing help using treemenu

Needing help using treemenu

Author Message

Christoph Polus

Monday 27 June 2005 9:11:20 am

Hello

I've got some problems understanding the TreeMenu function.

I have a navigation that looks like this:

Page 1
- Sub1.1
- Sub1.2
Page 2
- Sub2.1
- Sub2.2

What I would like to achieve now is an output like this:

<a href="URL" id="ID">LINKTEXT(Page1)</a>
<a href="URL" id="ID">LINKTEXT(Page2)</a>
<br/>

[somewhere else in the site]

<div id="PARENT_ID(ID of Page1)
  <a href="URL" id="ID">LINKTEXT(Page1.1)</a>
  <a href="URL" id="ID">LINKTEXT(Page1.2)</a>
</div>

<div id="PARENT_ID(ID of Page2)
  <a href="URL" id="ID">LINKTEXT(Page2.1)</a>
  <a href="URL" id="ID">LINKTEXT(Page2.2)</a>
</div>

The divs are set to visible on mouseover the pages on top level. So when I hover with my mouse on Page 1, the DIV with the children of page 1 should appear. Now this works statically. But I'd like to implement this into the TreeMenu.

Now I don't know how I can loop through all the level 2 objects, sort them by parent and priority and get their parent id once to put it into the encapsulating DIV as reference. Does anybody have an idea?

Thanks
Chris

Christoph Polus

Tuesday 28 June 2005 7:50:02 am

Hi

I'm almost there. This is what I have for now:

{let topMenus=treemenu($module_result.path, 2, true() , 0, 0)}
	<div id="leftNavigation">
		{section name=topMenu loop=$topMenus max=3}
			{section show=$topMenu:item.is_selected}
				<a id="navItem{$topMenu:item.id}" onmouseover="clearTimeout(timer); showDiv('navItem{$topMenu:item.id}', 'subNavLayer{$topMenu:item.id}');" onmouseout="timer=setTimeout('hideDiv({$topMenu:item.id})', pause);" href={$topMenu:item.url_alias|ezurl}>{$topMenu:item.text}</a>
			{section-else}
				<a id="navItem{$topMenu:item.id}" onmouseover="clearTimeout(timer); showDiv('navItem{$topMenu:item.id}', 'subNavLayer{$topMenu:item.id}');" onmouseout="timer=setTimeout('hideDiv({$topMenu:item.id})', pause);" href={$topMenu:item.url_alias|ezurl}>{$topMenu:item.text}</a>
			{/section}
		{/section}
	</div>
		{section name=topMenu loop=$topMenus max=3}
			<div style="left: 502px; top: 226px; visibility: hidden;" id="subNavLayer{$topMenu:item.id}">
				[What to put here?]
			</div>
		{/section}
{/let}

Now I only need to find out how I can iterate through all the children objects to output the subobjects.

Thanks for any help.
Chris

Christoph Polus

Tuesday 15 November 2005 2:18:46 am

Hey,

I did this a long time ago but wanted to share my findings with other people who need assistance in understanding the TreeMenu for the first time.

Here you are.

{let topMenus=treemenu($module_result.path, 2, true() , 0, 0)}
	<div id="leftNavigation">
		{section name=topMenu loop=$topMenus max=3}
			{section show=eq( $module_result.path[1].node_id, $topMenu:item.id )}
				<a id="navItem{$topMenu:number}" onmouseover="clearTimeout(timer); showDiv('navItem{$topMenu:number}', 'subNavLayer{$topMenu:number}');" onmouseout="timer=setTimeout('hideDiv({$topMenu:number})', pause);" href={$topMenu:item.url_alias|ezurl}>{$topMenu:item.text}</a>
			{section-else}
				<a id="navItem{$topMenu:number}" onmouseover="clearTimeout(timer); showDiv('navItem{$topMenu:number}', 'subNavLayer{$topMenu:number}');" onmouseout="timer=setTimeout('hideDiv({$topMenu:number})', pause);" href={$topMenu:item.url_alias|ezurl}>{$topMenu:item.text}</a>
			{/section}
		{/section}
	</div>
	{section name=topMenu loop=$topMenus max=2}
		<div id="subNavLayer{$topMenu:number}" class="subNavLayer" style="left: 502px; top: 226px; visibility: hidden;" onmouseover="clearTimeout(timer);" onmouseout="timer=setTimeout('hideAllDiv()', pause);">
		{def $dhtmlMenus=fetch( 'content', 'list', hash('parent_node_id', $topMenu:item.id, 'sort_by', array( array( 'priority' ) ) ) )}
		{foreach $dhtmlMenus as $dhtmlMenu}
			<a class="subNav" href={$dhtmlMenu.url_alias|ezurl}>{$dhtmlMenu.name}</a>
			{delimiter}<div class="subNavLine">&nbsp;</div>{/delimiter}
		{/foreach}
		</div>
	{/section}				
{/let}