Earlier I described in my design objectives for a new website, http://www.whitebarncondo.com. This article describes the menu system used for that site.
My objective was to use a DHTML mouse-over menu to aid navigation and site layout, but to preserve good functionality for browsers which do not support Javascript or have Javascript turned off.
Here’s the demo:
If you view this demo with Javascript disabled, your experience will be much different, but very appropriate.
The demo above is also available here: http://www.duanemcguire.com/blog/menudemo/
The Javascript library I used for this implementation is from BrainJar. I made one modification the the brainjar.js library they present in their demo3 . The modification I made allows for the use of <UL> instead of <DIV> for menu containers.
Discussion
The menu is implemented using CSS, Javascript (when detected), and ColdFusion. Though ColdFusion is used in these examples, any server-side technology could be used. And in fact no server-side technology is required, but as you will see, the server-side coding creates attractive code, which leads to easy maintenance.
The core code is contained in menu.cfm:
<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 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>
One of the menu <UL>’s, documentMenu.cfm, is shown here:
<!--- 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>
Complete source code for this demo is available here:
http://www.duanemcguire.com/blog/menudemo/menudemo.zip
And finally, by the way, the pages look fine when viewed on the simplest of browsers, lynx:
