Dynamic Menu in coldfusion

Here is a simple way to do a dynamic menu, there are some limits to this, but it seems to do ok…

style.css

/*=========================*/

/* Menu */

#navlist

{

border-bottom: 1px solid #ccc;

margin: 0;

padding-bottom: 19px;

padding-left: 10px;

}

#navlist ul, #navlist li

{

display: inline;

list-style-type: none;

margin: 0;

padding: 0;

}

#navlist a:link, #navlist a:visited

{

background: #E8EBF0;

border: 1px solid #ccc;

color: #666;

float: left;

font-size: small;

font-weight: normal;

line-height: 14px;

margin-right: 8px;

padding: 2px 10px 2px 10px;

text-decoration: none;

}

#navlist a:link#current, #navlist a:visited#current

{

background: #fff;

border-bottom: 1px solid #fff;

color: #000;

}

#navlist a:hover { color: #f00; }

body.section-1 #navlist li#nav-1 a,

body.section-2 #navlist li#nav-2 a,

body.section-3 #navlist li#nav-3 a,

body.section-4 #navlist li#nav-4 a

{

background: #fff;

border-bottom: 1px solid #fff;

color: #000;

}

/*==================*/

menu.cfm

<!—<MENU>—>

<cfparam name=“Active” default=“id=current”>

<!—————————————————>

<cfparam name=“Welcome” default=“page1.cfm”>

<cfparam name=“WelcomeDisplay” default=“All Concerns”>

<!———————>

<cfparam name=“SecondPage” default=“page2.cfm”>

<cfparam name=“SecondPageDisplay” default=“Tab two example”>

<!—————————————————>

<cfset Menu = “#Welcome#,#SecondPage#”>

<cfset MenuDisplay = “#WelcomeDisplay#”,#SecondPageDisplay#>

<cfset arrayMenu = ArrayNew(2)>

<cfset arrayMenu[1][1] = #Welcome#>

<cfset arrayMenu[1][2] = #WelcomeDisplay#>

<cfset arrayMenu[2][1] = #SecondPage#>

<cfset arrayMenu[2][2] = #SecondPageDisplay#>

<div id=“navcontainer”>

<ul id=“navlist”>

<cfloop from=“1” to=“#ArrayLen(arrayMenu)#” index=“i”>

<cfoutput>

<li id=“active”><a href=“#arrayMenu[i][1]#” <cfif #ListContainsNoCase (arrayMenu[i][1],“#CGI.SCRIPT_NAME#”)# is 1> #Active#> <cfelse> >

</cfif>#arrayMenu[i][2]#</a></li>

</cfoutput>

</cfloop>

</ul>

</div>

Leave a comment