How to get Topics, Sub-Topics, Sub-Sub-Topics to display in lefthand navigation (edited for clarity)

*gdemaria and _agx_ are familiar with this question and have helped me with considerable patience to build this application.*

I am trying to get Topics, Sub-Topics, Sub-Sub-Topics to display correctly in the left navgiation menu of the now-familiar CEP test web site.

The client wants a hierarchical fly-out menu in this shape:

Topic
------>Subtopic
      ------->SubSubtopic

So that Topics are arranged in order, and Subtopics under Topics, and Sub-Sub-Topics under Subtopics. I have mostly got it working. But there are two problems:

1. Some subtopics do not group correctly; for example, there are multiples of NCLB School Improvement, No Child Left Behind, and Rethinking the Federal Role

2. I am not able to get Sub-Sub-Topics to appear

I am trying to get Topics, Sub-Topics, and Sub-Sub-Topics to dynamically populate from the database, in hierarchical order. I know this would be easier if we had used a parent-child design to begin with, and yes I am kicking myself for not having enough foresight to do so. =(

Using this all-CSS flyout menu, can you think of a way to get the Subtopics to group correctly in left navigation, and to get the sub-sub-topics to appear?

I have been working on this problem for about a day and I figured I should ask for help. Thank you as always for any advice.

Eric

Here is the current code I am using, the result of which is viewable here:

http://ebwebwork.com/cep/index_test.cfm
<div id="menu">
 <!--- level 1, Topics --->
	<ul>
		
		<cfoutput query="Get_CEP_Topics_List_for_Navigation" group="DocumentTopic">
        
		<li>
        <a class="fly" href="/cep/index.cfm?DocumentTopicID=#Get_CEP_Topics_List_for_Navigation.DocumentTopicID#">#Get_CEP_Topics_List_for_Navigation.DocumentTopic#</a>
        
	
    
    
  <!--- level 2, Subtopics --->
	<ul>
		<cfoutput>
  <cfif DocumentSubTopicID is not "">
  
    <li><a class="fly" href="/cep/index.cfm?DocumentSubTopicID=#Get_CEP_Topics_List_for_Navigation.DocumentSubTopicID#">#Get_CEP_Topics_List_for_Navigation.DocumentSubTopicTitle#</a>
  
  </cfif>
  	</cfoutput>
				
 
 
 <!--- level 3 --->
	<ul>
    <cfoutput>
	<cfif DocumentSubSubTopicID is not "">
		<li><a href="/cep/index.cfm?DocumentSubSubTopicID=#Get_CEP_Topics_List_for_Navigation.DocumentSubSubTopicID#">#Get_CEP_Topics_List_for_Navigation.DocumentSubSubTopicTitle#</a></li>
                        </cfif>
  	</cfoutput>
				
					
                   <!--- /level 3 --->
                    </ul>
			
			
				
          <!--- /level 2 --->     
			</ul>
		</li>
	  </cfoutput>

 <!--- /level 1 --->
	</ul>
</div>

Open in new window

This is the query that selects columns from tables to populate the navigation menu:

<!--- query Get_CEP_Topics_List_for_Navigation: this query selects columns from table tbl_CEP_Document_Topic to create a list of CEP topics for the lefthand navigation menu; tp.DocumentTopicID 24 is omitted by design --->

<cfquery datasource="#ds#" name="Get_CEP_Topics_List_for_Navigation">
           SELECT tp.DocumentTopicID
                  , tp.DocumentTopic
                  , sub.DocumentSubTopicID
                  , sub.DocumentSubTopicTitle
                  , subsub.DocumentSubSubTopicID
                  , subsub.DocumentSubSubTopicTitle
           FROM tbl_CEP_Document_Topic tp
           LEFT JOIN tbl_CEP_Document_Subtopic sub
           ON sub.DocumentTopicID = tp.DocumentTopicID
           LEFT JOIN tbl_CEP_Document_Sub_Subtopic subsub ON subsub.DocumentSubTopicID = sub.DocumentSubTopicID
           WHERE tp.DocumentTopicID <> <cfqueryparam value="24" cfsqltype="cf_sql_integer">
           ORDER BY tp.DocumentTopic, sub.DocumentSubTopicTitle, subsub.DocumentSubSubTopicTitle
</cfquery>

Open in new window

The basic CSS menu takes this form. Notice the nested unordered lists and nested list items:

<div id="menu">

<!-- LEVEL 1 -->
	<ul>
		<li><a class="fly" href="#url">Topic / Level 1</a>
        
        <!-- code that loops through topics should go here -->
		
        
<!-- LEVEL 2 -->
			<ul>
				<li><a class="fly" href="#url">SubTopic / Level 2</a>
        
        <!-- code that loops through subtopics should go here -->        
                                		
                        
<!-- LEVEL 3 -->                		
					<ul>
						<li><a class="fly" href="#url">SubTopic / Level 3</a></li>
        <!-- code that loops through sub-sub-topics should go here -->                
                        
					</ul>
<!-- /LEVEL 3 -->

				
				</li>
            </ul>
<!-- /LEVEL 2 -->
                
<!-- /LEVEL 1 -->                
     </li>
</ul>
</div>

Open in new window

LVL 3
Eric BourlandAsked:
Who is Participating?
 
gdemariaConnect With a Mentor Commented:
Hey Eric,
I think for this one you need to look at the view-source of the generated page and compare how the generated HTML compares against the sample of what the menu system expects for list tags.

The order and looping should be the same as the <SELECT> tag you already have.  You just need to apply the list tags correctly.  Seeing how they are currently applied by looking at view-source will help you understand what the difference is between what you have and where you need to be..
0
 
_agx_Connect With a Mentor Commented:
Agreed.  I see 2 main problems.  The cfoutput's aren't nested properly. They need to be grouped by:  Topic then Subtopic

<cfoutput query="..." group="DocumentTopic">
      ... topics ...
      <cfoutput group="DocumentSubTopicID">
             ... SubTopics
             <cfoutput>....SubSub</cfoutput>
      </cfoutput>
</cfoutput>

Second, the code is always generating levels 2 and 3.

   <li>Topic Level 
       <!--- level 2, Subtopics --->
	<ul>....</ul>
    </li>   

Open in new window


It shouldn't do that. It needs to check if a subtopic/subsub exists *before* generating those levels.

   <li>Topic Level 
      <!--- Only generate level 2 IF a subtopic exists --->
      <cfif DocumentSubTopicID neq "">
	   <ul>.....</ul>
      </cfif>
   </li>

Open in new window


0
 
Eric BourlandAuthor Commented:
This is making more sense. I am working on both suggestions.

=)

E
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
Eric BourlandAuthor Commented:
OK. I think I got it.

http://ebwebwork.com/cep/index_test.cfm

Looking mostly OK. I just had to work with it. And gdemaria's note to view the source and see what the browser really displays was helpful. _agx_: yes: cfoutputs were not nested right.

The one trouble is the unordered list UL tag. On mouseover, the UL makes a visible top border appear even when there is no subtopic or subsubtopic menu item. I'm going to work with the CSS to resolve that.

Thank you for being extremely helpful as always. =) I hope you are enjoying a relaxing Friday evening. (I have spent mine with code; not unhappily.) =)

I'll close this question soon.

Peace.

Eric
<div id="menu">
 <!--- level 1, Topics --->
	<ul>	
	<cfoutput query="Get_CEP_Topics_List_for_Navigation" group="DocumentTopic">
			<li>
    			<a href="/cep/index.cfm?DocumentTopicID=#Get_CEP_Topics_List_for_Navigation.DocumentTopicID#">#Get_CEP_Topics_List_for_Navigation.DocumentTopic#</a>
        	

	  <ul>
 <!--- level 2, Subtopics --->
 	 	<cfoutput group="DocumentSubTopicTitle">
    
       <!--- Only generate level 2 IF a subtopic exists --->  
    		<cfif DocumentSubTopicID neq "">  
    
    			<li>
		    <a href="/cep/index.cfm?DocumentSubTopicID=#Get_CEP_Topics_List_for_Navigation.DocumentSubTopicID#">#Get_CEP_Topics_List_for_Navigation.DocumentSubTopicTitle#</a>
    
    
     <!--- level 3, sub sub topics --->  
	        <ul>  
    			<cfoutput>  
			        <cfif DocumentSubSubTopicID neq "">  
            		    <li><a href="/cep/index.cfm?DocumentSubSubTopicID=#Get_CEP_Topics_List_for_Navigation.DocumentSubSubTopicID#">#Get_CEP_Topics_List_for_Navigation.DocumentSubSubTopicTitle#</a></li>  
                    </cfif>  
		        </cfoutput>  
	   <!--- /level 3 --->  
    	</ul>  
     
    </li>
  		  
    	</cfif>
  
           	</cfoutput>
  <!--- /level 2 --->   
  </ul>
  		
            
		</li>
	</cfoutput>	
        
 <!--- /level 1 --->
	</ul>
</div>

Open in new window

0
 
gdemariaCommented:
Here is some code from the View-Source for your page.

After each link, you can see a new list tag start, but it is empty...

<li>
   <a href="/cep/index.cfm?DocumentTopicID=1">Common Core Standards</a>
   <ul></ul> <============ EMPTY <ul> TAG
</li>


I suspect that is causing the problem
<ul>	
	<li>
 	  <a href="/cep/index.cfm?DocumentTopicID=1">Common Core Standards</a>
  	<ul>
        </ul>
	</li>
	<li>
 		<a href="/cep/index.cfm?DocumentTopicID=6">Federal Education Programs</a>
  	    <ul>
  		  <li><a href="/cep/index.cfm?DocumentSubTopicID=1">Congressional Testimony</a>
          <ul> 
          </ul> 
    </li>
	<li>
	   <a href="/cep/index.cfm?DocumentSubTopicID=2">Economic Stimulus Package/ARRA</a>
       <ul> 
       </ul> 
    </li>

Open in new window

0
 
Eric BourlandAuthor Commented:
Definitely the empty UL causes the problem. If I include that UL inside the query, like so:

<!--- level 1, Topics --->  
   
        <cfoutput query="GetTopics ... etc">  
                  <ul>     <----------------------------------------------------------------------------------------- UL inside query
                        <li>  
                        <a href="/cep/index.cfm?DocumentTopicID=#Get_CEP_ etc etc

Then the navigation menu does not display correctly. Specifically, I get some display anomalies (menu items acquire extra top and bottom space), and the mouseover still causes the top extra padding to appear even when there is no submenu or subsubmenu item. I think I am going to adjust the CSS today to see what I can so about that extra top padding.
0
 
_agx_Commented:
Remember I mentioned you need to use cfif's to determine when to start a new level. That means placing the <ul>'s inside the cfif condition.

 <li>Topic Level
      <!--- Only generate level 2 IF a subtopic exists --->
      <cfif DocumentSubTopicID neq "">
         <ul>.....</ul>
      </cfif>
   </li>

0
 
_agx_Commented:
>> placing the <ul>'s inside the cfif condition.

...  In other words, everything related to the level has to be *inside* the CFIF.  Not tested, but the structure should be more like this




<!--- Only generate level 2 IF a subtopic exists --->  
<cfif DocumentSubTopicID neq "">  
   <ul>
     <cfoutput group="DocumentSubTopicTitle">
         <li> ... create subtopic link ...
         <cfif DocumentSubSubTopicID neq "">  
	     <ul>  
    		<cfoutput>  
             	    <li>... create subsub link </li>               
	        </cfoutput>  
    	    </ul> <!--- end level 3 --->
        </cfif>  
        </li>
     </cfoutput>
   </ul> <!--- end level 2 --->
</cfif>

Open in new window

0
 
Eric BourlandAuthor Commented:
I got it. I did as you said; it works. =)

It's working out pretty well:

http://ebwebwork.com/cep/index_test.cfm

The sub-sub-topics occur only under the Federal Education Programs Topic, and only under three subtopics under the Federal Education Programs Topic. I gave the sub-sub-topics a different bg color; and little arrows point at the sub-sub-topics from the sub-topics.

No, I don't understand any other that either. =) But it works. I predict client happiness.

I really appreciate you as always. I am gonna close this one.

Next steps:

1) get sub-sub-topics pages to appear as they should
2) resolve some sorting problems on subtopics and sub-sub-topics pages

I hope you weekend is going well.

E
0
 
Eric BourlandAuthor Commented:
Very useful advice as always from gdemaria and _agx_. Before this is over, these two ColdFusion experts will also be experts in the vagaries of federal public education programs. =)

Thank you friends.

Eric
0
 
_agx_Commented:
>> ... (I have spent mine with code; not unhappily.) =)

Code always makes me happy  too (Well... ok...except when it's not working ;-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.