Duane McGuire Blog

<cfparam name="url.area" default="home">
<cfscript>
	// Server side function modifies the
	// class name of the current tab.
	// In this demo, modification is based on url of request.
	function activeTab(vArea){
		// this logic is for demo only
		// should be changed to suit the site architecture.
		if (url.area eq vArea){
			return "Current";
		}else{
			return "";
		}
	}
</cfscript>
<!--- Main Menu Bar --->
<cfoutput>
<!---
	The class of each "a tag" below is modified by the
	value of the function activeTab(area) below.
	The activeTab function returns either 'Current' or ''.
	Thus the "a tag" class is either menuButton or menuButtonCurrent
--->
<div class="menuBar" >
	<a class="menuButton#activetab('home')#"
    href="index.cfm"
>Home</a
><a class="menuButton#activetab('document')#"
    href="noscriptMenu.cfm?menu=documentMenu&area=document"
    onclick="return buttonClick(event, 'documentMenu');"
    onmouseover="buttonMouseover(event, 'documentMenu');"
>Documents</a
><a class="menuButton#activetab('community')#"
    href="noscriptMenu.cfm?menu=communityMenu&area=community"
    onclick="return buttonClick(event, 'communityMenu');"
    onmouseover="buttonMouseover(event, 'communityMenu');"
>Community</a
><a class="menuButton#activetab('contact')#"
    href="index.cfm?page=contactUs/contactUs.cfm&area=contact"
>Contact&nbsp;Us</a
></div>
</cfoutput>
<!---
Rather than putting out the dhtml menu directly, write it out with
client side script.  In that way, alternate browsers which may have
JS disabled will not see the divs at all.  We have also decluttered the
screens of these browsers if they also do not recognize CSS. We could
do this without coldfusion processing, but by stripping out CR and
TAB and escaping JS code, the menus:  documentMenu.cfm,
communityMenu.cfm, etc. are highly readable.
--->
<cfsavecontent variable="dhtmlMenu">
	<cfinclude template="documentMenu.cfm">
	<cfinclude template="communityMenu.cfm">
	<cfinclude template="communityMenuNewsletters.cfm">
</cfsavecontent>
<cfset dhtmlMenu = replace(dhtmlMenu,chr(10),"","all")>
<cfset dhtmlMenu = replace(dhtmlMenu,chr(13),"","all")>
<cfset dhtmlMenu = replace(dhtmlMenu,chr(9),"","all")>

<script language="Javascript">
	document.write('<cfoutput>#jsstringformat(dhtmlMenu)#</cfoutput>');
</script>

<!--- Document Menu --->
<ul id="documentMenu" class="menu"
     onmouseover="menuMouseover(event)">

	<li><a class="menuItem" href="index.cfm?page=content/documents/white_barn_PRUD_CCRs.pdf&area=document">Covenants and Restrictions</a></li>
	<li><a class="menuItem" href="index.cfm?page=content/documents/white_barn_PRUD_bylaws.pdf&area=document">By Laws</a></li>
	<li><a class="menuItem" href="index.cfm?page=documents/communityRules.cfm&area=document">Community Rules</a></li>
	<li><a class="menuItem" href="index.cfm?page=documents/petRules.cfm&area=document">Pet Rules</a></li>

</ul>