Code Bank
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
 
User Name:
Password:
Remember me
Go Back   ASP Free Forums > Programming > Code Bank
Reload this Page

ASP + CSS + DHTML Recursive Menu System

Discuss ASP + CSS + DHTML Recursive Menu System in the Code Bank forum on ASP Free.
ASP + CSS + DHTML Recursive Menu System Code Bank forum containing sample code and scripts to help solve common problems. Take a look and use the code to assist in your projects.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread ASP Free Forums Sponsor:
  #1  
Old January 22nd, 2007, 09:53 AM
degsy degsy is offline
Contributing User
ASP Free God 2nd Plane (6000 - 6499 posts)
  
Join Date: Aug 2005
Location: North East, UK
Posts: 6,191 degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 3 Weeks 4 Days 19 h 41 m 52 sec
Reputation Power: 121
ASP + CSS + DHTML Recursive Menu System
Here is an example of a Pure ASP Recursive Menu system.
CSS and DHTML can be added to format and style the menu.

Menu output as HTML List
http://computer-helpforum.com/asp/a...ee_Tutorial.asp

Menu with DHTML Tree script/CSS applied
http://computer-helpforum.com/asp/a...m_DHTMLTree.asp

Files for the Recursive Menu, DHTML Tree script and Database can be found attached here
http://forums.aspfree.com/showpost....205&postcount=4





Database Setup

The first thing to do is structure the database.
This example uses four tables

Category
- CatID (PK, Autonumber)
- CatName (Text)

SubCat
- CatID (PK, Number)
- SubCatID (PK, Number)

Link
- LinkID (PK, AutoNumber)
- LinkName (Text)
- LinkURL (Text)
- LinkDescription (Memo)

LinkCat
- LinkID (PK, Number)
- CatID (PK, Number)


Categories are entered in the Categories table (Autonumber starting at 1).
To determine Sub Categories, Category IDs are entered into the SubCat table along with it's Parent CatID

e.g.
Code:
CatID SubCat
1 0
2 1
3 1


This means that CatID 1 is the Sub Category of CatID 0.
Seeing as though there cannot be a CatID of 0 then this makes CatID a top level menu. It cannot be a Sub Category.

CatID 2 is a Sub Category of CatID 1 etc.


The same method is applied the LinkCat table


Database Joins

The association in the script is made by using JOINs in the queries.

e.g. For the listCat Sub proceduce query
sql Code:
Original - sql Code 
  1. sql = "SELECT Category.CatID, Category.CatName  FROM Category" &_
  2.           " INNER JOIN SubCat ON Category.CatID = SubCat.CatID" &_
  3.           " WHERE SubCat.SubCatID = " & CatID &_
  4.           " ORDER BY CatName"


This query grabs the data from the Category table where the SubCatID in the SubCat table is equal to CatID

e.g. CatID = 0 'get all top level categories

The same method applies to the SubCat and the Link queries.



HTML Output

Once the query has been made the output can start.
In this example the menu is output as a HTML List

asp Code:
Original - asp Code 
  1. While NOT Category.EOF
  2.             'Indented Response.Write indicates optional output
  3.             Response.Write "<ul"
  4.                 'Response.Write "class=""mktree"" id=""UL_" & Category("CatID") & """"
  5.             Response.Write ">" & vbCRLF
  6.             Response.Write Space(2) & "<li>" & Category("CatName")
  7.                 'Response.Write " (CategoryID " & Category("CatID") & ")"
  8.             Response.Write vbCRLF
  9.             
  10.             Call listSubCat(Category("CatID"),1)
  11.             Category.MoveNext()
  12.              
  13.             Response.Write Space(2) & "</li>" & vbCRLF
  14.             Response.Write "</ul>" & vbCRLF
  15.         Wend


The Space() function, Counter variable and vbCRLF constant are used to provide source code formatting for the HTML output.



Recursive Menu

The way the recursive menu works is using while loops to check if a CatID has a SubCat associated with it.
If it does then it calls the menu Sub procedure again, passing the new CatID.
It will do this as many times as it finds a matching record in the query for the CatID.
It will also call the listLink Sub procedure to ouput any links that are associated with the current SubCatID.

Here is the code for the Sub procedures

asp Code:
Original - asp Code 
  1. Sub listCat(CatID)
  2.  
  3.     sql = "SELECT Category.CatID, Category.CatName  FROM Category" &_
  4.           " INNER JOIN SubCat ON Category.CatID = SubCat.CatID" &_
  5.           " WHERE SubCat.SubCatID = " & CatID &_
  6.           " ORDER BY CatName"
  7.           
  8.     Set Category = Server.CreateObject("ADODB.Recordset")
  9.     Category.ActiveConnection = MM_MenuSystem_STRING
  10.     Category.Source = sql
  11.     Category.CursorType = 0
  12.     Category.CursorLocation = 2
  13.     Category.LockType = 1
  14.     Category.Open()
  15.     
  16.         While NOT Category.EOF
  17.             'Indented Response.Write indicates optional output
  18.             Response.Write "<ul"
  19.                 'Response.Write "class=""mktree"" id=""UL_" & Category("CatID") & """"
  20.             Response.Write ">" & vbCRLF
  21.             Response.Write Space(2) & "<li>" & Category("CatName")
  22.                 'Response.Write " (CategoryID " & Category("CatID") & ")"
  23.             Response.Write vbCRLF
  24.             
  25.             Call listSubCat(Category("CatID"),1)
  26.             Category.MoveNext()
  27.              
  28.             Response.Write Space(2) & "</li>" & vbCRLF
  29.             Response.Write "</ul>" & vbCRLF
  30.         Wend
  31.         
  32.     Category.Close()
  33.     Set Category = Nothing
  34. End Sub


asp Code:
Original - asp Code 
  1. Sub listSubCat(CatID, Counter)
  2.     
  3.     sql = "SELECT Category.CatID, Category.CatName  FROM Category" &_
  4.           " INNER JOIN SubCat ON Category.CatID = SubCat.CatID" &_
  5.           " WHERE SubCat.SubCatID = " & CatID &_
  6.           " ORDER BY Category.CatName"
  7.  
  8.     Set SubCat = Server.CreateObject("ADODB.Recordset")
  9.     SubCat.ActiveConnection = MM_MenuSystem_STRING
  10.     SubCat.Source = sql
  11.     SubCat.CursorType = 0
  12.     SubCat.CursorLocation = 2
  13.     SubCat.LockType = 1
  14.     SubCat.Open()
  15.         
  16.     If Not SubCat.EOF Or Not SubCat.BOF Then
  17.         While NOT SubCat.EOF
  18.             
  19.             'Indented Response.Write indicates optional output
  20.             Response.Write Space(2+Counter) & "<ul>" & vbCRLF
  21.             Response.Write Space(4+Counter) & "<li>"
  22.             Response.Write SubCat("CatName")
  23.                 'Response.Write " (CategoryID " & SubCat("CatID") & ")"
  24.             Response.Write vbCRLF
  25.             
  26.             Counter = Counter + 4
  27.             Call listSubCat(SubCat("CatID"), Counter)
  28.             Call listLink(SubCat("CatID"), Counter)
  29.             Counter = Counter - 4
  30.             
  31.             Response.Write Space(4+Counter) & "</li>" & vbCRLF
  32.             Response.Write Space(2+Counter) & "</ul>" & vbCRLF
  33.         
  34.         SubCat.MoveNext()
  35.         Wend
  36.     End If ' end Not SubCat.EOF Or NOT SubCat.BOF 
  37.     
  38.     SubCat.Close()
  39.     Set SubCat = Nothing
  40. End Sub


asp Code:
Original - asp Code 
  1. Sub listLink(CatID, Counter)
  2.     
  3.     sql = "SELECT Link.LinkID, Link.LinkName, Link.LinkURL, Link.LinkDescription, LinkCat.CatID FROM Link" &_
  4.           " INNER JOIN LinkCat ON Link.LinkID = LinkCat.LinkID" &_
  5.           " WHERE LinkCat.CatID = " & CatID
  6.           
  7.     Set Link = Server.CreateObject("ADODB.Recordset")
  8.     Link.ActiveConnection = MM_MenuSystem_STRING
  9.     Link.Source = sql
  10.     Link.CursorType = 0
  11.     Link.CursorLocation = 2
  12.     Link.LockType = 1
  13.     Link.Open()
  14.     
  15.     
  16.     If Not Link.EOF Or Not Link.BOF Then
  17.         'Indented Response.Write indicates optional output
  18.         Response.Write Space(2+Counter) & "<ul"
  19.             'Response.Write " id=""UL_" & CatID & """"
  20.         Response.Write ">" & vbCRLF
  21.         While NOT Link.EOF
  22.             
  23.             'Indented Response.Write indicates optional output
  24.             Response.Write Space(4+Counter) & "<li" 
  25.                 'Response.Write " id=""LI_" & Link("LinkID") & """"
  26.             Response.Write ">"
  27.             Response.Write "<a href=""" & Link("LinkURL") & """" 
  28.                 Response.Write " target=""_blank"""
  29.                 Response.Write " title=""" & Link("LinkDescription") & """"
  30.             Response.Write ">"
  31.             Response.Write Link("LinkName")
  32.             Response.Write "</a>"
  33.                 'Response.Write " (LinkID " & Link("LinkID") & ")"
  34.             Response.Write "</li>" & vbCRLF
  35.         
  36.         Link.MoveNext()
  37.         Wend
  38.         Response.Write Space(2+Counter) & "</ul>" & vbCRLF
  39.     End If ' end Not Link.EOF Or NOT Link.BOF
  40.     
  41.     Link.Close()
  42.     Set Link = Nothing
  43. End Sub



To start the menu system the listCat Sub procedure needs to be called, passing the top level CatID, which is 0 (Zero)

Put this in the page where you want the menu to be output
asp Code:
Original - asp Code 
  1. <% Call listCat(0) %>
__________________
CyberTechHelp
Last edited by degsy : January 22nd, 2007 at 10:10 AM.
Reply With Quote
  #2  
Old January 22nd, 2007, 09:56 AM
degsy degsy is offline
Contributing User
ASP Free God 2nd Plane (6000 - 6499 posts)
  
Join Date: Aug 2005
Location: North East, UK
Posts: 6,191 degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 3 Weeks 4 Days 19 h 41 m 52 sec
Reputation Power: 121
Note: This script has been stripped down. The Response.Write lines for the CSS/DHTML menu have been commented out.

asp Code:
Original - asp Code 
  1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
  2. <%
  3. MM_MenuSystem_STRING = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" &_
  4.                        Server.MapPath("MenuSystem.mdb")
  5.                        
  6.  
  7. Sub listCat(CatID)
  8.  
  9.     sql = "SELECT Category.CatID, Category.CatName  FROM Category" &_
  10.           " INNER JOIN SubCat ON Category.CatID = SubCat.CatID" &_
  11.           " WHERE SubCat.SubCatID = " & CatID &_
  12.           " ORDER BY CatName"
  13.           
  14.     Set Category = Server.CreateObject("ADODB.Recordset")
  15.     Category.ActiveConnection = MM_MenuSystem_STRING
  16.     Category.Source = sql
  17.     Category.CursorType = 0
  18.     Category.CursorLocation = 2
  19.     Category.LockType = 1
  20.     Category.Open()
  21.     
  22.         While NOT Category.EOF
  23.             'Indented Response.Write indicates optional output
  24.             Response.Write "<ul"
  25.                 'Response.Write "class=""mktree"" id=""UL_" & Category("CatID") & """"
  26.             Response.Write ">" & vbCRLF
  27.             Response.Write Space(2) & "<li>" & Category("CatName")
  28.                 'Response.Write " (CategoryID " & Category("CatID") & ")"
  29.             Response.Write vbCRLF
  30.             
  31.             Call listSubCat(Category