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}

eZ debug

Timing: Jan 18 2025 11:35:01
Script start
Timing: Jan 18 2025 11:35:01
Module start 'content'
Timing: Jan 18 2025 11:35:03
Module end 'content'
Timing: Jan 18 2025 11:35:03
Script end

Main resources:

Total runtime1.3297 sec
Peak memory usage4,096.0000 KB
Database Queries192

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0164 587.7109180.8359
Module start 'content' 0.01641.1631 768.5469457.3203
Module end 'content' 1.17950.1501 1,225.8672337.4766
Script end 1.3297  1,563.3438 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00470.3566210.0002
Check MTime0.00180.1382210.0001
Mysql Total
Database connection0.00820.617810.0082
Mysqli_queries1.243893.53801920.0065
Looping result0.00320.24391900.0000
Template Total1.260794.820.6304
Template load0.00250.188320.0013
Template processing1.258294.622720.6291
Template load and register function0.00030.019510.0003
states
state_id_array0.00090.071210.0009
state_identifier_array0.00170.126320.0008
Override
Cache load0.00210.1616300.0001
Sytem overhead
Fetch class attribute can translate value0.00120.090220.0006
Fetch class attribute name0.00160.121930.0005
XML
Image XML parsing0.00040.028920.0002
class_abstraction
Instantiating content class attribute0.00000.000530.0000
General
dbfile0.00160.1213210.0001
String conversion0.00000.000530.0000
Note: percentages do not add up to 100% because some accumulators overlap

CSS/JS files loaded with "ezjscPacker" during request:

CacheTypePacklevelSourceFiles
CSS0extension/community/design/community/stylesheets/ext/jquery.autocomplete.css
extension/community_design/design/suncana/stylesheets/scrollbars.css
extension/community_design/design/suncana/stylesheets/tabs.css
extension/community_design/design/suncana/stylesheets/roadmap.css
extension/community_design/design/suncana/stylesheets/content.css
extension/community_design/design/suncana/stylesheets/star-rating.css
extension/community_design/design/suncana/stylesheets/syntax_and_custom_tags.css
extension/community_design/design/suncana/stylesheets/buttons.css
extension/community_design/design/suncana/stylesheets/tweetbox.css
extension/community_design/design/suncana/stylesheets/jquery.fancybox-1.3.4.css
extension/bcsmoothgallery/design/standard/stylesheets/magnific-popup.css
extension/sevenx/design/simple/stylesheets/star_rating.css
extension/sevenx/design/simple/stylesheets/libs/fontawesome/css/all.min.css
extension/sevenx/design/simple/stylesheets/main.v02.css
extension/sevenx/design/simple/stylesheets/main.v02.res.css
JS0extension/ezjscore/design/standard/lib/yui/3.17.2/build/yui/yui-min.js
extension/ezjscore/design/standard/javascript/jquery-3.7.0.min.js
extension/community_design/design/suncana/javascript/jquery.ui.core.min.js
extension/community_design/design/suncana/javascript/jquery.ui.widget.min.js
extension/community_design/design/suncana/javascript/jquery.easing.1.3.js
extension/community_design/design/suncana/javascript/jquery.ui.tabs.js
extension/community_design/design/suncana/javascript/jquery.hoverIntent.min.js
extension/community_design/design/suncana/javascript/jquery.popmenu.js
extension/community_design/design/suncana/javascript/jScrollPane.js
extension/community_design/design/suncana/javascript/jquery.mousewheel.js
extension/community_design/design/suncana/javascript/jquery.cycle.all.js
extension/sevenx/design/simple/javascript/jquery.scrollTo.js
extension/community_design/design/suncana/javascript/jquery.cookie.js
extension/community_design/design/suncana/javascript/ezstarrating_jquery.js
extension/community_design/design/suncana/javascript/jquery.initboxes.js
extension/community_design/design/suncana/javascript/app.js
extension/community_design/design/suncana/javascript/twitterwidget.js
extension/community_design/design/suncana/javascript/community.js
extension/community_design/design/suncana/javascript/roadmap.js
extension/community_design/design/suncana/javascript/ez.js
extension/community_design/design/suncana/javascript/ezshareevents.js
extension/sevenx/design/simple/javascript/main.js

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1node/view/full.tplfull/forum_topic.tplextension/sevenx/design/simple/override/templates/full/forum_topic.tplEdit templateOverride template
3content/datatype/view/ezxmltext.tpl<No override>extension/community_design/design/suncana/templates/content/datatype/view/ezxmltext.tplEdit templateOverride template
8content/datatype/view/ezxmltags/paragraph.tpl<No override>extension/ezwebin/design/ezwebin/templates/content/datatype/view/ezxmltags/paragraph.tplEdit templateOverride template
3content/datatype/view/ezxmltags/line.tpl<No override>design/standard/templates/content/datatype/view/ezxmltags/line.tplEdit templateOverride template
3content/datatype/view/ezxmltags/literal.tpl<No override>extension/community/design/standard/templates/content/datatype/view/ezxmltags/literal.tplEdit templateOverride template
1pagelayout.tpl<No override>extension/sevenx/design/simple/templates/pagelayout.tplEdit templateOverride template
 Number of times templates used: 19
 Number of unique templates used: 6

Time used to render debug report: 0.0002 secs