horizontal menu challenges

I needed to implement a self contained Horizontal menu that shows the user which section they are in by using a highlight that is different from the rest of the menu bar. No breadcrumbs.

Using coldfusion allowed me to do it. Turn everything off then use an URL variable (xWhereAmI_ind) to turn on the section they are in. We then use a class variable which is controlled by CSS to affect the appearance of the hilight.

<cfset navhome="HILIGHT_OFF">
<cfset navreports="HILIGHT_OFF">
<cfset navdocs="HILIGHT_OFF">
<cfset navtools="HILIGHT_OFF">
<cfset navlinks="HILIGHT_OFF">
<cfset navinternal="HILIGHT_OFF">
 
<cfif #IsDefined('xWhereAmI_ind')#>
<cfswitch expression="#xWhereAmI_ind#">
<cfcase value="home_gnXd"><cfset navhome="HILIGHT_ON"></cfcase>
<cfcase value="rpt_gnXd"><cfset navreports="HILIGHT_ON></cfcase>
<cfcase value="doc_gnXd"><cfset navdocs="HILIGHT_ON"></cfcase>
<cfcase value="tool_gnXd"><cfset navtools="HILIGHT_ON"></cfcase>
<cfcase value="link_gnXd"><cfset navlinks="HILIGHT_ON"></cfcase>
<cfcase value="linkIntrnl_gnXd"><cfset navinternal="HILIGHT_ON"><</cfcase>
</cfswitch>
</cfif>

One note. FOR MSIE 6 you must declare the css for each of the highlight anchor modes (link, hover, visited) separately from the menu anchor modes. The highlight a:link and a:visited should be the same.

ul li a:link{background-color:white; color:blue;}
ul li a:hover{background-color:blue; color: white}
ul li a:visited{background-color:silver; color:blue;}
ul .HIGHLIGHT_ON a:link{background-color:blue; color:white}
ul .HIGHLIGHT_ON a:hover{background-color:blue; color: black}
ul .HIGHLIGHT_ON a:visited{background-color:white; color: blue}

Cup size   
Select size then click on coffee cup.
This entry was posted in Code, CSS, Problems & Fixes. Bookmark the permalink.