Well, given there has been more talk on menus lately I decided to also take Chris
Kent's example, fiddle with it a little, and
make it a "stand alone" thing that doesnt rely on the Tree Menu Magic code.
NOTE: again - it is NOT a working menu system and I have deliberately put coloured
borders around the DIV's and displayed menu
levels - all for the purpose of educating. To turn it into a "real" menu system you
will have modify the markup to suit your
prupose and either create your own template header and footer that uses it or modify
an existing template header/footer.
The example is designed to be VERY visual so that what the markup does and what you
see are similar. You probably would not do
this for a production system.
To use this example, drop the code at the end of the email into <your
app>/webskin/includes under some suitable name (like
testmenu.cfm) and then call it (using <CFMODULE>) from inside the guts of a template
(like <your
app>/webskin/dmHTML/displaypageStandard.cfm) and create up a "deep" menu tree with
dmHTML pages that use whichever template you
drop the <CFMODULE> call into. Something like this:
...snippet (from displaypageStandard.cfm)....
.
.
.
<!--- this was the exisitng output for the body of the current object --->
<cfoutput>#stObj.body#</cfoutput>
<!--- ADD THIS IN - outputs the DIV based menu --->
<cfmodule
template="/farcry/#application.applicationname#/webskin/includes/testmenu.cfm">
<!--- this was the existing container ---->
<con:container label="#stObject.objectID#_bottom">
.
.
.
As Ben said, creating up a menu system has multiple parts to it, and getting the data
from FarCry is only step one. It is what
you do with the other two steps after that which makes the menu system.
NOTE: mail programs like to wrap code around - so you may have to fix up the ends of
some lines to make it work.
Regards,
Gary Menzel
<!--- get navigation elements to root --->
<cfset qNav =
application.factory.oTree.getDescendants(objectID=#application.navid.home#)>
<cfset navLevel=arrayNew(1)>
<cfset navObjectID=arrayNew(1)>
<cfset navObjectName=arrayNew(1)>
<cfset navLevel = ListToArray(ValueList(qNav.nLevel))>
<cfset navObjectID = ListToArray(ValueList(qNav.objectID))>
<cfset navObjectName = ListToArray(ValueList(qNav.objectName))>
<CFOUTPUT>
<script>
function ToggleMenu(e)
{
if(e)
{
if(e.parentNode && e.parentNode.childNodes)
{
nodes = e.parentNode.childNodes;
}
else
{
return;
}
for(i=0;i<nodes.length;i++)
{
if(nodes[i].tagName=="DIV")
{
oldStyle = nodes[i].style.display;
newStyle = (oldStyle=="block")?"none":"block";
nodes[i].style.display = newStyle;
}
}
}
}
</script>
</CFOUTPUT>
<!--- show the main container as RED --->
<cfoutput>
<div id="MainNav" style="width: 400px; text-align:Left; border: 1px solid ##F00">
</cfoutput>
<cfloop index="rowno" from="1" to="#ArrayLen(navObjectID)#">
<CFSET sInitialDisplay = "none">
<CFIF navLevel[rowno] EQ "2">
<CFSET sInitialDisplay = "block">
</CFIF>
<!--- No Children --->
<cfif rowno eq #ArrayLen(navObjectID)# or
navLevel[rowno] eq navLevel[rowno+1] or
navLevel[rowno] gt navLevel[rowno+1]>
<!--- we have a LEAF node here - show as GREEN border --->
<cfoutput>
<div style="border: 1px solid ##0F0; margin: 5px; display: #sInitialDisplay#">
<a href="#application.url.conjurer#?objectID=#navObjectID[rowno]#">
#navObjectName[rowno]# (navlevel:#navLevel[rowno]#)</a>
</div>
</cfoutput>
<!--- Parent --->
<cfelseif navLevel[rowno] lt navLevel[rowno+1]>
<!--- we have a CONTAINER node here - show as BLUE border --->
<cfoutput>
<div style="border: 1px solid ##00F; margin: 5px; display: #sInitialDisplay#">
<a href="##" onclick="ToggleMenu(this);return false">+</a>
<a href="#application.url.conjurer#?objectID=#navObjectID[rowno]#">
#navObjectName[rowno]# (navlevel:#navLevel[rowno]#)</a>
</cfoutput>
</cfif>
<!--- Lastchild close off the Divs --->
<!---
I am a <CFSCRIPT> fan where possible because I find I can read it
easier
--->
<CFSCRIPT>
if( rowno eq ArrayLen(navObjectID)
or
navLevel[rowno] gt navLevel[rowno+1])
{
if(rowno eq ArrayLen(navObjectID))
{
// borrowed this from Ben's example to replace the <CFLOOP>'s
in Chris'
WriteOutput(RepeatString("</div>"&chr(13),navLevel[rowno]-navLevel[1]));
}
else
{
// borrowed this from Ben's example to replace the <CFLOOP>'s
in Chris'
WriteOutput(RepeatString("</div>"&chr(13),navLevel[rowno]-navLevel[rowno+1]));
}
}
</CFSCRIPT>
</cfloop>
<cfoutput></div></cfoutput>
---
You are currently subscribed to farcry-dev as: [EMAIL PROTECTED]
To unsubscribe send a blank email to [EMAIL PROTECTED]
MXDU2004 + Macromedia DevCon AsiaPac + Sydney, Australia
http://www.mxdu.com/ + 24-25 February, 2004
