Solved

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

Posted on 2010-11-18
11
511 Views
Last Modified: 2012-05-10
*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

0
Comment
Question by:Eric Bourland
  • 5
  • 4
  • 2
11 Comments
 
LVL 39

Accepted Solution

by:
gdemaria earned 250 total points
ID: 34176659
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
 
LVL 52

Assisted Solution

by:_agx_
_agx_ earned 250 total points
ID: 34176860
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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 34176956
This is making more sense. I am working on both suggestions.

=)

E
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 34178764
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
 
LVL 39

Expert Comment

by:gdemaria
ID: 34180280
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 3

Author Comment

by:Eric Bourland
ID: 34180467
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
 
LVL 52

Expert Comment

by:_agx_
ID: 34180782
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
 
LVL 52

Expert Comment

by:_agx_
ID: 34180798
>> 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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 34180865
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
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 34180870
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
 
LVL 52

Expert Comment

by:_agx_
ID: 34180873
>> ... (I have spent mine with code; not unhappily.) =)

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

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
POST parameters exceeds the maximum limit 5 82
multi page pdf 4 69
C# script to Coldfusion 25 52
Using a variable with dateAdd 18 60
Hi, I will be creating today a basic tutorial on how we can create a Mail Custom Function and use it where ever we want. The main advantage about creating a custom function is that we can accommodate a range of arguments to pass to the Function and …
Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now