Got bored doing real work so decided to play instead.
Quickly put together the code to create a multiple level dropdown navigation driven by the Farcry tree and using the BrainJar "Revenge of the Menu Bar" so credits due and offered to Daemon and Mike Hall from BrainJar.com.
Example can be seen working on my site www.mxdesign.co.uk
This is a quickly coded version, and I welcome comments on how to improve it, and improvements I am expecting. Also I have made no attempt to style it yet. I am sure that there are benefits to caching this menu.
Code:
Place the following attached files in directory www/bjmenu
bjmenu.css
bjmenu.js
and place the following attached files in directory webskin/includes
_bjmenu.cfm
Added the following to me dmHeader.cfm
<link rel="stylesheet" type="text/css" href="" media="screen" />
<SCRIPT type="text/_javascript_" src=""></SCRIPT>
and replaced the cfmodule for _primaryNav.cfm with
<cfmodule template="/farcry/#application.applicationname#/webskin/includes/_bjmenu.cfm">
Thats it for now.
Code for _bjmenu.cfm
<!--- Get First Level Menu Items for menu bar --->
<cfset qNav = application.factory.oTree.getChildren(objectID=#application.navid.home#)>
<cfoutput>
<!--- Container Div for brainjar menu --->
<div class="menuBar" style="width:98%;">
<!--- Create Mneu Bar Buttons --->
<!--- Welcome/Home Page - will work a better way to get this in --->
<a class="menuButton" href="" >Welcome</a>
<cfloop query="qNav">
<a class="menuButton" href="" >#qNav.objectName#</a>
</cfloop>
</div>
<!--- Parse all nodes in tree --->
<cfset qNav = application.factory.oTree.getDescendants(objectID=#application.navid.home#)>
<cfloop query="qnav">
<!--- Get children if any --->
<cfset qNav2 = application.factory.oTree.getChildren(objectID=#qNav.objectID#)>
<!--- Create a sub menu --->
<cfif qNav2.recordcount gt 0>
<div id="#URLEncodedFormat(qNav.objectName)#Menu" class="menu" >
<!--- Create sub menu children --->
<cfloop query="qNav2">
<cfset qNav3 = application.factory.oTree.getChildren(objectID=#qNav2.objectID#)>
<!--- Is there another submnue below this link? --->
<cfif qNav3.recordcount gt 0>
<a class="menuItem" href="" ><span class="menuItemText">#qNav2.objectName#</span><span class="menuItemArrow">&##9654;</span></a>
<cfelse>
<a class="menuItem" href="">#qNav2.objectName#</a>
</cfif>
</cfloop>
</div>
</cfif>
</cfloop>
</cfoutput>
It does rely on _javascript_, but then any multiple level dropdown menu does.
Things to do:
- Paramatise it, so the root node can be passed in
- Style it - in the CSS
- Not sure if this will distinguish between covers draft/published node - I assume it does as it is using the standard Farcry objects to get the data from tree
Chris.
div.menuBar,
div.menuBar a.menuButton,
div.menu,
div.menu a.menuItem {
font-family: "MS Sans Serif", Arial, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: normal;
color: #000000;
}
div.menuBar {
background-color: #e0e0e0;
border: 2px outset #e0e0e0;
padding: 4px 2px 4px 2px;
text-align: left;
}
div.menuBar a.menuButton {
background-color: transparent;
border: 1px solid #e0e0e0;
color: #000000;
cursor: default;
left: 0px;
margin: 1px;
padding: 2px 6px 2px 6px;
position: relative;
text-decoration: none;
top: 0px;
z-index: 100;
}
div.menuBar a.menuButton:hover {
background-color: transparent;
border: 1px outset #e0e0e0;
color: #000000;
}
div.menuBar a.menuButtonActive,
div.menuBar a.menuButtonActive:hover {
background-color: #5050f0;
border: 1px inset #e0e0e0;
color: #ffffff;
left: 1px;
top: 1px;
}
div.menu {
background-color: #e0e0e0;
border: 2px outset #e0e0e0;
left: 0px;
padding: 0px 1px 1px 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 101;
}
div.menu a.menuItem {
color: #000000;
cursor: default;
display: block;
padding: 3px 1em;
text-decoration: none;
white-space: nowrap;
}
div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
background-color: #5050f0;
color: #ffffff;
}
div.menu a.menuItem span.menuItemText {}
div.menu a.menuItem span.menuItemArrow {
margin-right: -.75em;
}
div.menu div.menuItemSep {
border: 1px inset #e0e0e0;
margin: 4px 2px;
}
bjmenu.js
Description: JavaScript source
<!--- Get First Level Menu Items for menu bar --->
<cfset qNav = application.factory.oTree.getChildren(objectID=#application.navid.home#)>
<cfoutput>
<!--- Container Div for brainjar menu --->
<div class="menuBar" style="width:98%;">
<!--- Create Mneu Bar Buttons --->
<!--- Welcome/Home Page - will work a better way to get this in --->
<a class="menuButton"
href="#application.url.conjurer#?objectid=#application.navid.home#" onclick="return
buttonClick(event, '#URLEncodedFormat(qNav.objectName)#Menu');"
onmouseover="buttonMouseover(event,
'#URLEncodedFormat(qNav.objectName)#Menu');">Welcome</a>
<cfloop query="qNav">
<a class="menuButton"
href="#application.url.conjurer#?objectid=#qNav.ObjectID#" onclick="return
buttonClick(event, '#URLEncodedFormat(qNav.objectName)#Menu');"
onmouseover="buttonMouseover(event,
'#URLEncodedFormat(qNav.objectName)#Menu');">#qNav.objectName#</a>
</cfloop>
</div>
<!--- Parse all nodes in tree --->
<cfset qNav =
application.factory.oTree.getDescendants(objectID=#application.navid.home#)>
<cfloop query="qnav">
<!--- Get children if any --->
<cfset qNav2 = application.factory.oTree.getChildren(objectID=#qNav.objectID#)>
<!--- Create a sub menu --->
<cfif qNav2.recordcount gt 0>
<div id="#URLEncodedFormat(qNav.objectName)#Menu" class="menu"
onmouseover="menuMouseover(event)">
<!--- Create sub menu children --->
<cfloop query="qNav2">
<cfset qNav3 =
application.factory.oTree.getChildren(objectID=#qNav2.objectID#)>
<!--- Is there another submnue below this link? --->
<cfif qNav3.recordcount gt 0>
<a class="menuItem"
href="#application.url.conjurer#?objectid=#qNav2.ObjectID#"
onmouseover="menuItemMouseover(event,
'#URLEncodedFormat(qNav2.objectName)#Menu');"><span
class="menuItemText">#qNav2.objectName#</span><span
class="menuItemArrow">&##9654;</span></a>
<cfelse>
<a class="menuItem"
href="#application.url.conjurer#?objectid=#qNav2.ObjectID#">#qNav2.objectName#</a>
</cfif>
</cfloop>
</div>
</cfif>
</cfloop>
</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
