Is there a site we can have a look at to check out the menu?
On Wed, 27 Oct 2004 14:01:34 -0400, Michael J. Sammut <[EMAIL PROTECTED]> wrote: > I do not know if this will be helpful to anyone, but some time ago we > formatted the brain jar tag into a really simple custom tag. This is a > really bare bones menu tag, but does the trick and cleans up real well > if you tweak the CSS. > > The CF code was done by Chris Kent and then a few updates here and there > to make it a tag by me. Any tweaks or thoughts are welcome. > > Again a thanks to Chris my Jedi Friend!!!! > > [Place in the header of template to whatever is your path to the css and js] > > <link rel="stylesheet" type="text/css" href="/css/bjmenu.css" > media="screen" /> > > <SCRIPT type="text/javascript" src="/js/menu/bjmenu.js"></SCRIPT> > > [Place _bjmenu.cfm in a folder of your choice and call in the tag > wherever you want the nav to show] > > <cfmodule > template="/farcry/#application.applicationname#/webskin/includes/_bjmenu.cfm" > root="#application.navid.home#" > showHome="no" > delimiter=" | "> > > [Two recommendations. 1) Do not wrap a cfoutput around the tag 2) If > your tree is big, cache the nav.] > > -- > Regards, > Michael J. Sammut > ________________________________________________ > > F O U R E Y E S P R O D U C T I O N S > think | plan | create :: web site design & development :: NYC > > E. [EMAIL PROTECTED] | T: 718.254.9557 ext. 101 | F: 718.254.0399 > > W. http://www.foureyes.com > > > //***************************************************************************** > // Do not remove this notice. > // > // Copyright 2000-2004 by Mike Hall. > // See http://www.brainjar.com for terms of use. > //***************************************************************************** > > //---------------------------------------------------------------------------- > // Code to determine the browser and version. > //---------------------------------------------------------------------------- > > function Browser() { > > var ua, s, i; > > this.isIE = false; // Internet Explorer > this.isOP = false; // Opera > this.isNS = false; // Netscape > this.version = null; > > ua = navigator.userAgent; > > s = "Opera"; > if ((i = ua.indexOf(s)) >= 0) { > this.isOP = true; > this.version = parseFloat(ua.substr(i + s.length)); > return; > } > > s = "Netscape6/"; > if ((i = ua.indexOf(s)) >= 0) { > this.isNS = true; > this.version = parseFloat(ua.substr(i + s.length)); > return; > } > > // Treat any other "Gecko" browser as Netscape 6.1. > > s = "Gecko"; > if ((i = ua.indexOf(s)) >= 0) { > this.isNS = true; > this.version = 6.1; > return; > } > > s = "MSIE"; > if ((i = ua.indexOf(s))) { > this.isIE = true; > this.version = parseFloat(ua.substr(i + s.length)); > return; > } > } > > var browser = new Browser(); > > //---------------------------------------------------------------------------- > // Code for handling the menu bar and active button. > //---------------------------------------------------------------------------- > > var activeButton = null; > > /* [MODIFIED] This code commented out, not needed for activate/deactivate > on mouseover. > > // Capture mouse clicks on the page so any active button can be > // deactivated. > > if (browser.isIE) > document.onmousedown = pageMousedown; > else > document.addEventListener("mousedown", pageMousedown, true); > > function pageMousedown(event) { > > var el; > > // If there is no active button, exit. > > if (activeButton == null) > return; > > // Find the element that was clicked on. > > if (browser.isIE) > el = window.event.srcElement; > else > el = (event.target.tagName ? event.target : event.target.parentNode); > > // If the active button was clicked on, exit. > > if (el == activeButton) > return; > > // If the element is not part of a menu, reset and clear the active > // button. > > if (getContainerWith(el, "DIV", "menu") == null) { > resetButton(activeButton); > activeButton = null; > } > } > > [END MODIFIED] */ > > function buttonClick(event, menuId) { > > var button; > > // Get the target button element. > > if (browser.isIE) > button = window.event.srcElement; > else > button = event.currentTarget; > > // Blur focus from the link to remove that annoying outline. > > button.blur(); > > // Associate the named menu to this button if not already done. > // Additionally, initialize menu display. > > if (button.menu == null) { > button.menu = document.getElementById(menuId); > if (button.menu.isInitialized == null) > menuInit(button.menu); > } > > // [MODIFIED] Added for activate/deactivate on mouseover. > > // Set mouseout event handler for the button, if not already done. > > if (button.onmouseout == null) > button.onmouseout = buttonOrMenuMouseout; > > // Exit if this button is the currently active one. > > if (button == activeButton) > return false; > > // [END MODIFIED] > > // Reset the currently active button, if any. > > if (activeButton != null) > resetButton(activeButton); > > // Activate this button, unless it was the currently active one. > > if (button != activeButton) { > depressButton(button); > activeButton = button; > } > else > activeButton = null; > > return false; > } > > function buttonMouseover(event, menuId) { > > var button; > > // [MODIFIED] Added for activate/deactivate on mouseover. > > // Activates this button's menu if no other is currently active. > > if (activeButton == null) { > buttonClick(event, menuId); > return; > } > > // [END MODIFIED] > > // Find the target button element. > > if (browser.isIE) > button = window.event.srcElement; > else > button = event.currentTarget; > > // If any other button menu is active, make this one active instead. > > if (activeButton != null && activeButton != button) > buttonClick(event, menuId); > } > > function depressButton(button) { > > var x, y; > > // Update the button's style class to make it look like it's > // depressed. > > button.className += " menuButtonActive"; > > // [MODIFIED] Added for activate/deactivate on mouseover. > > // Set mouseout event handler for the button, if not already done. > > if (button.onmouseout == null) > button.onmouseout = buttonOrMenuMouseout; > if (button.menu.onmouseout == null) > button.menu.onmouseout = buttonOrMenuMouseout; > > // [END MODIFIED] > > // Position the associated drop down menu under the button and > // show it. > > x = getPageOffsetLeft(button); > y = getPageOffsetTop(button) + button.offsetHeight; > > // For IE, adjust position. > > if (browser.isIE) { > x += button.offsetParent.clientLeft; > y += button.offsetParent.clientTop; > } > > button.menu.style.left = x + "px"; > button.menu.style.top = y + "px"; > button.menu.style.visibility = "visible"; > } > > function resetButton(button) { > > // Restore the button's style class. > > removeClassName(button, "menuButtonActive"); > > // Hide the button's menu, first closing any sub menus. > > if (button.menu != null) { > closeSubMenu(button.menu); > button.menu.style.visibility = "hidden"; > } > } > > //---------------------------------------------------------------------------- > // Code to handle the menus and sub menus. > //---------------------------------------------------------------------------- > > function menuMouseover(event) { > > var menu; > > // Find the target menu element. > > if (browser.isIE) > menu = getContainerWith(window.event.srcElement, "DIV", "menu"); > else > menu = event.currentTarget; > > // Close any active sub menu. > > if (menu.activeItem != null) > closeSubMenu(menu); > } > > function menuItemMouseover(event, menuId) { > > var item, menu, x, y; > > // Find the target item element and its parent menu element. > > if (browser.isIE) > item = getContainerWith(window.event.srcElement, "A", "menuItem"); > else > item = event.currentTarget; > menu = getContainerWith(item, "DIV", "menu"); > > // Close any active sub menu and mark this one as active. > > if (menu.activeItem != null) > closeSubMenu(menu); > menu.activeItem = item; > > // Highlight the item element. > > item.className += " menuItemHighlight"; > > // Initialize the sub menu, if not already done. > > if (item.subMenu == null) { > item.subMenu = document.getElementById(menuId); > if (item.subMenu.isInitialized == null) > menuInit(item.subMenu); > } > > // [MODIFIED] Added for activate/deactivate on mouseover. > > // Set mouseout event handler for the sub menu, if not already done. > > if (item.subMenu.onmouseout == null) > item.subMenu.onmouseout = buttonOrMenuMouseout; > > // [END MODIFIED] > > // Get position for submenu based on the menu item. > > x = getPageOffsetLeft(item) + item.offsetWidth; > y = getPageOffsetTop(item); > > // Adjust position to fit in view. > > var maxX, maxY; > > if (browser.isIE) { > maxX = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) + > (document.documentElement.clientWidth != 0 ? > document.documentElement.clientWidth : document.body.clientWidth); > maxY = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + > (document.documentElement.clientHeight != 0 ? > document.documentElement.clientHeight : document.body.clientHeight); > } > if (browser.isOP) { > maxX = document.documentElement.scrollLeft + window.innerWidth; > maxY = document.documentElement.scrollTop + window.innerHeight; > } > if (browser.isNS) { > maxX = window.scrollX + window.innerWidth; > maxY = window.scrollY + window.innerHeight; > } > maxX -= item.subMenu.offsetWidth; > maxY -= item.subMenu.offsetHeight; > > if (x > maxX) > x = Math.max(0, x - item.offsetWidth - item.subMenu.offsetWidth > + (menu.offsetWidth - item.offsetWidth)); > y = Math.max(0, Math.min(y, maxY)); > > // Position and show the sub menu. > > item.subMenu.style.left = x + "px"; > item.subMenu.style.top = y + "px"; > item.subMenu.style.visibility = "visible"; > > // Stop the event from bubbling. > > if (browser.isIE) > window.event.cancelBubble = true; > else > event.stopPropagation(); > } > > function closeSubMenu(menu) { > > if (menu == null || menu.activeItem == null) > return; > > // Recursively close any sub menus. > > if (menu.activeItem.subMenu != null) { > closeSubMenu(menu.activeItem.subMenu); > menu.activeItem.subMenu.style.visibility = "hidden"; > menu.activeItem.subMenu = null; > } > removeClassName(menu.activeItem, "menuItemHighlight"); > menu.activeItem = null; > } > > // [MODIFIED] Added for activate/deactivate on mouseover. Handler for mouseout > // event on buttons and menus. > > function buttonOrMenuMouseout(event) { > > var el; > > // If there is no active button, exit. > > if (activeButton == null) > return; > > // Find the element the mouse is moving to. > > if (browser.isIE) > el = window.event.toElement; > else if (event.relatedTarget != null) > el = (event.relatedTarget.tagName ? event.relatedTarget : > event.relatedTarget.parentNode); > > // If the element is not part of a menu, reset the active button. > > if (getContainerWith(el, "DIV", "menu") == null) { > resetButton(activeButton); > activeButton = null; > } > } > > // [END MODIFIED] > > //---------------------------------------------------------------------------- > // Code to initialize menus. > //---------------------------------------------------------------------------- > > function menuInit(menu) { > > var itemList, spanList; > var textEl, arrowEl; > var itemWidth; > var w, dw; > var i, j; > > // For IE, replace arrow characters. > > if (browser.isIE) { > menu.style.lineHeight = "2.5ex"; > spanList = menu.getElementsByTagName("SPAN"); > for (i = 0; i < spanList.length; i++) > if (hasClassName(spanList[i], "menuItemArrow")) { > spanList[i].style.fontFamily = "Webdings"; > spanList[i].firstChild.nodeValue = "4"; > } > } > > // Find the width of a menu item. > > itemList = menu.getElementsByTagName("A"); > if (itemList.length > 0) > itemWidth = itemList[0].offsetWidth; > else > return; > > // For items with arrows, add padding to item text to make the > // arrows flush right. > > for (i = 0; i < itemList.length; i++) { > spanList = itemList[i].getElementsByTagName("SPAN"); > textEl = null; > arrowEl = null; > for (j = 0; j < spanList.length; j++) { > if (hasClassName(spanList[j], "menuItemText")) > textEl = spanList[j]; > if (hasClassName(spanList[j], "menuItemArrow")) > arrowEl = spanList[j]; > } > if (textEl != null && arrowEl != null) { > textEl.style.paddingRight = (itemWidth > - (textEl.offsetWidth + arrowEl.offsetWidth)) + "px"; > // For Opera, remove the negative right margin to fix a display bug. > if (browser.isOP) > arrowEl.style.marginRight = "0px"; > } > } > > // Fix IE hover problem by setting an explicit width on first item of > // the menu. > > if (browser.isIE) { > w = itemList[0].offsetWidth; > itemList[0].style.width = w + "px"; > dw = itemList[0].offsetWidth - w; > w -= dw; > itemList[0].style.width = w + "px"; > } > > // Mark menu as initialized. > > menu.isInitialized = true; > } > > //---------------------------------------------------------------------------- > // General utility functions. > //---------------------------------------------------------------------------- > > function getContainerWith(node, tagName, className) { > > // Starting with the given node, find the nearest containing element > // with the specified tag name and style class. > > while (node != null) { > if (node.tagName != null && node.tagName == tagName && > hasClassName(node, className)) > return node; > node = node.parentNode; > } > > return node; > } > > function hasClassName(el, name) { > > var i, list; > > // Return true if the given element currently has the given class > // name. > > list = el.className.split(" "); > for (i = 0; i < list.length; i++) > if (list[i] == name) > return true; > > return false; > } > > function removeClassName(el, name) { > > var i, curList, newList; > > if (el.className == null) > return; > > // Remove the given class name from the element's className property. > > newList = new Array(); > curList = el.className.split(" "); > for (i = 0; i < curList.length; i++) > if (curList[i] != name) > newList.push(curList[i]); > el.className = newList.join(" "); > } > > function getPageOffsetLeft(el) { > > var x; > > // Return the x coordinate of an element relative to the page. > > x = el.offsetLeft; > if (el.offsetParent != null) > x += getPageOffsetLeft(el.offsetParent); > > return x; > } > > function getPageOffsetTop(el) { > > var y; > > // Return the x coordinate of an element relative to the page. > > y = el.offsetTop; > if (el.offsetParent != null) > y += getPageOffsetTop(el.offsetParent); > > return y; > } > > > <cfsetting enablecfoutputonly="yes"> > > <cfparam name="attributes.root" default="#application.navid.home#"> <!--- where to > start from ---> > <cfparam name="attributes.showHome" default="no"> <!--- show home in the menu? ---> > <cfparam name="attributes.rootName" default="Home"> <!--- what is home called? ---> > <cfparam name="attributes.delimiter" default="|"> <!--- what do you want to seperate > the nav elements with? ---> > > <!--- lets makes the URLs friendly ---> > <cfimport taglib="/farcry/farcry_core/tags/webskin" prefix="skin"> > > <!--- Get First Level Menu Items for menu bar ---> > > <cfscript> > // get navigation elements to root and test for approved > o = createObject("component", "#application.packagepath#.farcry.tree"); > dbColumn="status,externallink"; > navFilter=arrayNew(1); > navfilter[1]="status IN (#listQualify(request.mode.lvalidstatus, "'")#) AND > status = 'approved'"; > qNav = o.getDescendants(objectid=attributes.root, depth=1, > afilter=navFilter, lcolumns=dbColumn); > </cfscript> > > <!--- Container Div for brainjar menu ---> > > <!--- Create Menu Bar Buttons ---> > > <cfif attributes.showHome EQ "yes"> > <cfoutput><a class="menuButton" > href="/">#attributes.rootName#</a>#attributes.delimiter#</cfoutput> > </cfif> > <cfloop query="qNav"> > <cfoutput><a href="</cfoutput><skin:buildlink objectid="#qNav.objectid#" > externallink="#qNav.externallink#" urlonly="true" /><cfoutput>" > onmouseover="buttonMouseover(event, > '#URLEncodedFormat(qNav.objectid)#Menu');">#trim(qNav.objectName)#</a><cfif > qNav.currentRow LT qNav.recordCount>#attributes.delimiter#</cfif></cfoutput> > </cfloop> > > <!--- Parse all nodes in tree ---> > <cfscript> > // get navigation elements to root and test for approved > o = createObject("component", "#application.packagepath#.farcry.tree"); > dbColumn="status,externallink"; > navFilter=arrayNew(1); > navfilter[1]="status IN (#listQualify(request.mode.lvalidstatus, "'")#) AND > status = 'approved'"; > qNav = o.getDescendants(objectid=attributes.root, afilter=navFilter, > lcolumns=dbColumn); > </cfscript> > > <cfloop query="qnav"> > <!--- Get children if any ---> > <cfscript> > // get navigation elements to root and test for approved > o = createObject("component", "#application.packagepath#.farcry.tree"); > dbColumn="status,externallink"; > navFilter=arrayNew(1); > navfilter[1]="status IN (#listQualify(request.mode.lvalidstatus, "'")#) AND > status = 'approved'"; > qNav2 = o.getDescendants(objectid=qNav.objectID, depth=1, afilter=navFilter, > lcolumns=dbColumn); > </cfscript> > > <!--- Create a sub menu ---> > <cfif qNav2.recordcount gt 0> > <cfoutput><div id="#URLEncodedFormat(qNav.objectid)#Menu" > class="menu" onmouseover="menuMouseover(event)"></cfoutput> > <!--- Create sub menu children ---> > <cfloop query="qNav2"> > <cfscript> > // get navigation elements to root and test > for approved > o = createObject("component", > "#application.packagepath#.farcry.tree"); > dbColumn="status,externallink"; > navFilter=arrayNew(1); > navfilter[1]="status IN > (#listQualify(request.mode.lvalidstatus, "'")#) AND status = 'approved'"; > qNav3 = > o.getDescendants(objectid=qNav2.objectID, depth=1, afilter=navFilter, > lcolumns=dbColumn); > </cfscript> > > <!--- Is there another submenu below this link? ---> > <cfif qNav3.recordcount gt 0> > <cfoutput><div style="width:100%" > class="menuItem"><a style="width:100%;" class="menuItem" > href="</cfoutput><skin:buildlink objectid="#qNav2.objectid#" > externallink="#qNav2.externallink#" urlonly="true" /><cfoutput>" > onmouseover="menuItemMouseover(event, > '#URLEncodedFormat(qNav2.objectid)#Menu');"><span > class="menuItemText">#trim(qNav2.objectName)#</span><span > class="menuItemArrow">&##9654;</span></a></div></cfoutput> > <cfelse> > <cfoutput><div style="width:100%" > class="menuItem"><a style="width:100%;" class="menuItem" > href="</cfoutput><skin:buildlink objectid="#qNav2.objectid#" > externallink="#qNav2.externallink#" urlonly="true" > /><cfoutput>">#trim(qNav2.objectName)#</a></div></cfoutput> > </cfif> > </cfloop> > <cfoutput></div></cfoutput> > <cfelse> > <cfoutput><div id="#URLEncodedFormat(qNav.objectid)#Menu" > onmouseover="menuMouseover(event)"></div></cfoutput> > </cfif> > </cfloop> > > <cfsetting enablecfoutputonly="no"> > > > --- > You are currently subscribed to farcry-dev as: [EMAIL PROTECTED] > To unsubscribe send a blank email to [EMAIL PROTECTED] > > > Aussie Macromedia Developers: http://lists.daemon.com.au/ > > > > --- You are currently subscribed to farcry-dev as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] Aussie Macromedia Developers: http://lists.daemon.com.au/
