W3Schools Forum > generating complex <ul>

W3Schools Forum > Server Scripting > ColdFusion

vchris

Dec 11 2007, 06:08 PM

I have this pretty big ul list. This list has 3 levels. For instance Data Users is lvl1, Search for pollutant Releases is lvl2 under Data Users and Web Maps is lvl3 under Data Users and Search for... Then you can have other lvl1, lvl2 or lvl3. I only need to use this list on about 9 different sections of the site so some of the section of the list won't be shown but might be in the future.

Let's say you are on Web Maps page, the navigation should open Data Users then Search for pollutant Releases and highlight Web Maps.

I'm already creating the list with a 2 dimensional array and for loop. It creates it nicely except when it comes to opening a certain section of the ul.

CODE

<cfparam name="selected" default="" />
<cfparam name="visibility" default=' style="display: none;"' />
<cfparam name="lastlvl" default="" />
<cfparam name="navlist" default="" />

<cfset myNav = ArrayNew(2) />

<cfset myNav[1][1] = "Home" />
<cfset myNav[1][2] = "##" />
<cfset myNav[1][3] = "lvl1" />
<cfset myNav[2][1] = "Data Users" />
<cfset myNav[2][2] = "##" />
<cfset myNav[2][3] = "lvl1" />
<cfset myNav[3][1] = "Search for Pollutant Releases" />
<cfset myNav[3][2] = "##" />
<cfset myNav[3][3] = "lvl2" />
<cfset myNav[4][1] = "Web Maps" />
<cfset myNav[4][2] = "##" />
<cfset myNav[4][3] = "lvl3" />
<cfset myNav[5][1] = "NPRI Databases" />
<cfset myNav[5][2] = "##" />
<cfset myNav[5][3] = "lvl2" />
<cfset myNav[6][1] = "Criteria Air Contaminants (CAC)" />
<cfset myNav[6][2] = "##" />
<cfset myNav[6][3] = "lvl2" />
<cfset myNav[7][1] = "1990 - 2015 CAC Emission Summaries" />
<cfset myNav[7][2] = "##" />
<cfset myNav[7][3] = "lvl3" />
<cfset myNav[8][1] = "CAC Emission Outlook" />
<cfset myNav[8][2] = "##" />
<cfset myNav[8][3] = "lvl3" />
<cfset myNav[9][1] = "2000 CAC Emission Maps" />
<cfset myNav[9][2] = "##" />
<cfset myNav[9][3] = "lvl3" />
<cfset myNav[10][1] = "Data Analysis" />
<cfset myNav[10][2] = "##" />
<cfset myNav[10][3] = "lvl2" />
<cfset myNav[11][1] = "NPRI Lists of Substances" />
<cfset myNav[11][2] = "##" />
<cfset myNav[11][3] = "lvl2" />
<cfset myNav[12][1] = "NPRI List of Substances" />
<cfset myNav[12][2] = "##" />
<cfset myNav[12][3] = "lvl3" />
<cfset myNav[13][1] = "Toxic Substances (CEPA)" />
<cfset myNav[13][2] = "##" />
<cfset myNav[13][3] = "lvl3" />
<cfset myNav[14][1] = "Alternate Threshold Substances" />
<cfset myNav[14][2] = "##" />
<cfset myNav[14][3] = "lvl3" />
<cfset myNav[15][1] = "Criteria Air Contaminants" />
<cfset myNav[15][2] = "##" />
<cfset myNav[15][3] = "lvl3" />
<cfset myNav[16][1] = "Reporting Facilities" />
<cfset myNav[16][2] = "##" />
<cfset myNav[16][3] = "lvl1" />




<div id="sidenav">
	<cfloop index="i" from="1" to="#ArrayLen(myNav)#">
		<!--- Create list --->
		<cfif i GT 1>
			<!--- if same lvl --->
			<cfif right(lastlvl,1) - right(myNav[i][3],1) EQ 0>
				<cfset navlist = navlist & '</li>' />
			<!--- if lower lvl --->
			<cfelseif right(lastlvl,1) - right(myNav[i][3],1)  EQ -1>
				<!--- Make sublist visible --->
				<cfif section EQ myNav[i-1][1]>
					<cfset navlist = navlist & '<ul>' />
				<cfelse>
					<cfset navlist = navlist & '<ul style="display:none;">' />
				</cfif>
			<!--- if higher lvl by 1 --->
			<cfelseif right(lastlvl,1) - right(myNav[i][3],1) EQ 1>
				<cfset navlist = navlist & '</li></ul></li>' />
			<!--- if higher lvl by 2 --->
			<cfelseif right(lastlvl,1) - right(myNav[i][3],1) EQ 2>
				<cfset navlist = navlist & '</li></ul></li></ul></li>' />
			</cfif>
		</cfif>
		<!--- Add selected class --->
		<cfif section EQ myNav[i][1]>
			<cfset selected = ' class="selected"' />
		</cfif>
		<cfset navlist = navlist & '<li><a href="#myNav[i][2]#"#selected#>#myNav[i][1]#</a>' />
		<cfset selected = "" />
		<cfset lastlvl = myNav[i][3] />
	</cfloop>
	<cfset navlist = '<ul>' & navlist & '</li></ul>' />
	<cfoutput>#navlist#</cfoutput>
</div>

I was thinking of setting a variable on each page that tells my script to open the sublist but it's getting really complex. The problem with this is when it comes to adding a new sublist item or moving items around, it's kinda complicated for someone else.

This might not be the best way to display the list, if you know of a better way to create it and open only a specific section on certain pages let me know.

EDIT: Actually I found a way for it to work. I created 3 variables. 1 for lvl1, lvl2 and lvl3. Seems to work nicely. Only thing I don't like is the huge array...

Jonas

Dec 17 2007, 05:10 PM

Can't you just make a ul list from an XML file? I could be wrong, but I'd think it'd be easier to make when you already have the tree-structure of xml. I also imagine it would be easier to update..?

vchris

Dec 17 2007, 06:48 PM

QUOTE (Jonas @ Dec 17 2007, 12:10 PM)

Can't you just make a ul list from an XML file? I could be wrong, but I'd think it'd be easier to make when you already have the tree-structure of xml. I also imagine it would be easier to update..?

I'd go that way any day over what I got now. Unfortunately I'm not allowed to use XML at work. I got standards to meet and XML doesn't... Kinda stupid if you ask me but that's the government. At least we're up to xhtml strict now.

Jonas

Dec 18 2007, 12:26 AM

QUOTE (vchris @ Dec 17 2007, 07:48 PM)

LOL, that's funny. You're allowed to use xhtml strict, but not xml. Really, what's the difference except in a name, and a doctype for xhtml giving a frame for what tags to use? And xml should meet the standard. As you of course know, you don't need to make the entire file an xml, just load an xml file with CF and generate an on-the-fly ul list from that. The end result will still adhere to xhtml strict standard. Surely you can convince them of that? I can (partially) understand not allowing XPath, XSLT, X-whatever, because they have mixed support, but not allowing plain XML files for information is plain ridiculous... :|

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.