Article
Build a Dynamic Menu in ColdFusion
Section B
<CFOUTPUT>
<script type="text/javascript">
function ShowMenu(n)
{
var menu, arrowImg;
menu = document.getElementById("d" + n);
Section C
// Determine if the menu is currently showing.
if (menu.style.display == 'block')
{
// If it is showing, hide the menu and update the twisty image.
menu.style.display = 'none';
arrowImg = document.images['i' + n];
arrowImg.src = "#VARIABLES.RootLevel#images/right_arrow.gif";
}
Section C handles the event of clicking on an already-expanded menu branch. Doing this triggers the branch to collapse. The menu doesn’t have to function this way, but why require your users to select a different level just to collapse a section? Instead, we simply take the section the user clicked on and see if it’s expanded; if it is, we collapse it. If it is not expanded, move right along to Section D.
Section D
else
{
// Hide all layers first.
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++)
if (divs[i].id.indexOf("d0") >= 0)
divs[i].style.display = 'none';
// Reset the images.
for (var j = 0; j < document.images.length; j++)
if (document.images[j].src.indexOf("down_arrow") > 0)
document.images[j].src = "#VARIABLES.RootLevel#images/right_arrow.gif";
// Show the menus and update their twisty images.
i = 2;
while (n.length >= i)
{
menu = document.getElementById("d" + n.substring(0, i));
arrowImg = document.images["i" + n.substring(0, i)];
menu.style.display = "block";
arrowImg.src = "#VARIABLES.RootLevel#images/down_arrow.gif";
i += 2;
}
}
}
</script>
</CFOUTPUT>
Section D is pretty long -- it’s the remainder of the JavaScript function ShowMenu(). If the branch that the user selected was not already expanded, the first order of business is to collapse all branches. We essentially want to start with a fresh menu each time. To accomplish this, we loop over the structure of the image tags (all named in series), resetting each image. We repeat the process on the menu structure itself (each <div> tag that makes up the menu is named in series like the images, so looping over the entire menu is very easy).
Once the entire menu has been collapsed, we have to expand the chosen menu branch. Since each branch can have its own sub-branches, the JavaScript has to not only expand the main branch, but, if the user clicks a sub-branch, that branch must be expanded also (see Image 3). Once the appropriate branches are expanded, the corresponding images need to be changed. Our menu uses two images: a blue arrow pointing to the right and a gold arrow that points down. These serve as an additional visual cue for the user.
Image 3
Once the images are adjusted, we’re done – in terms of the JavaScript, that is. We covered the JavaScript first, even though the ColdFusion part of our custom tag will execute first, because I wanted to establish the flow of the code and how it should work before we cover the set up. The JavaScript is the work horse of this menu, so it’s important to know what’s going on there and how everything works. Now, time to face the CF!
The Set Up
This menu is the product of a ColdFusion custom tag. Wherever you need the menu to appear (keeping in mind that this menu is vertical), you simply include the tag. To set up the menu on a page, you’ll require two lines of code. Sample 1 shows the <body> tag as well as the actual custom tag call. The ColdFusion code in the body tag expands the menu to reflect the user’s location within the site. Without this logic the menu collapses on load by default.