Solved

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

Posted on 2010-11-18
11
521 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article  is about submitting  form through  ColdFusion.Ajax.submitForm to the action page and send a response back in JSON format which later can be decoded using ColdFusion.JSON.decode. By this way you can avoid the usual page refresh for subm…
Today, I was working on some optimization and spam-stopping techniques when I encountered Ben Nadel's post to reduce spam feature using Math (http://www.bennadel.com/blog/197-How-I-Stop-Spammers-On-My-ColdFusion-Blog.htm). While this method is not o…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.
Delivering innovative fully-managed cloud services for mission-critical applications requires expertise in multiple areas plus vision and commitment. Meet a few of the people behind the quality services of Concerto.

943 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

5 Experts available now in Live!

Get 1:1 Help Now