Customizable ASP Tab Navigational Bar

Summary

This article and the provided code comprises of a complete customizable ASP Tab Navigational Bar.

Overview

This article is all about writing a simple ASP code to build the rich navigation bar. The source code provided with this article is written entirely in VBScript.

I don't want to go for JavaScript for this kind of code snippet since most browsers won't recognize the client JavaScript.

Directory Structure

An Ideal ASP application will have the following directory structure:

|

|-- wwwroot

  |

  |-- aspnavbar -- [where the asp files should reside]

    |                (.asp files)

    |-- include -- [where the include files should reside]

                     (.asp and .css files)

Mandatory Routine for ASP Tab Navigational Bar

This routine could be found at include/common.asp

Quick Look

Here is how the routine looks like:

<%

Public Function navBar(navtab)



Dim tab(5,1)

Dim temp

Dim curpage

Dim spacer



curpage = navtab



tab(0,0) = ("home")

tab(0,1) = ("default.asp")

tab(1,0) = ("about")

tab(1,1) = ("main.asp")

tab(2,0) = ("photos")

tab(2,1) = ("photos.asp")

tab(3,0) = ("downloads")

tab(3,1) = ("downloads.asp")

tab(4,0) = ("feedback")

tab(4,1) = ("feedback.asp")

tab(5,0) = ("contact")

tab(5,1) = ("contact.asp")



temp = "<TABLE cellSpacing=0 cellPadding=0 border=0>" _

	& "<TR><TD align=center><br>"



For i = Lbound(tab) to UBound(tab)     

   spacer = "<TD width=10>&nbsp;</TD><TD align=center><br>"

   If i = LBound(tab) then

      spacer = ""

   end if

   

   if curpage = tab(i,0) then

      temp = temp + spacer

      temp = temp + "<A href="&tab(i,1)&" class=menu_active>" _

         & "<B>&nbsp;"&tab(i,0)&"&nbsp;</B></TD>"

   else

      temp = temp + spacer

      temp = temp + "<A href="&tab(i,1)&" class=menu_inactive>" _

         & "<B>&nbsp;"&tab(i,0)&"&nbsp;</B></TD>"   

   end if

Next

temp = temp +"<TD align=center><TR>" _

   & "<TD bgColor=#6666ff colSpan=18><IMG height=6></TD>"

temp = temp +"</TR></TABLE>"

navBar = Response.Write(temp)



End Function

%>

Cruise into the Routine

Let's take a look at the code with the help of a real time scenario.

First, create an ASP document and save it as common.asp. Now inside the ASP tags we should be able to start writing a routine using VBScript.

Start with :

Public Function navbar(navtab)

In the above statement we know that the function name is navbar and the argument is navtab. Only by passing this argument into the routine, we can enable the client to navigate through the corresponding requested page.

For e.g., if the argument passed into the routine is "home" then the client should be able to navigate to the home page of the website.

The declaration part is not really needed but sometimes while executing database operations, it might be essential too.

This is one of the reasons why I like PHP; of course, the most important factor in its favor is that PHP is open source.

We need to declare the following:

Dim tab(5,1)
Dim temp
Dim curpage
Dim spacer

Variables in Detail

tab(5,1)

This is the two dimensional array which will consist the values as shown in the following example. tab(5,1) : [This should be increased according to the number of tabs going to be displayed in the navigation bar]

temp

This is the temporary variable which will hold all the HTML stuff throughout the routine to give us the complete navigational bar.

curpage

This is the variable which will carry the information about the page in which the user is currently in.

spacer

This is the variable which is used to separate each of the tabs in the navigational bar.

Variables and Function in Action

1. First assign the argument which is derived from the function declaration to the variable curpage as follows:

   curpage = navtab

2. Moving on, we should store the details of the pages and their respective file names in the declared two dimensional array as follows:

   tab(0,0) - ("home") -- In this array subscript we should store the content to be displayed in the navigation tab

   tab(0,1) - ("default.asp") -- In this array subscript we should store the URL file name to be associated.

3. After having all the tabs in a two dimensional array we can start the HTML population for the navbar. Start the table tag first..

   temp = "<TABLE cellSpacing=0 cellPadding=0 border=0><TR><TD align=center><br>"

   This "temp" variable will store all the details required to build the ASP Navigational Bar.

4. Now include the space between each tab for the navigational bar. For this, we need to start from the lower value of the array subscript till the end subscript. If it is the starting value, then DO NOT provide any space.

   
   For i = Lbound(tab) to UBound(tab)
   
    spacer = "<TD width=10>&nbsp;</TD><TD align=center><br>"
   
    If i = LBound(tab) then
   
      spacer = ""
   
    end if
   
   

5. Then Check if the subscript value equals the value in the curpage variable.

   if curpage = tab(i,0) then

6. If it is true then concatenate the spacer between the tabs and write the html tag to specify the URL and highlight it using the required CSS class.

   Note: [In the CSS file provided, all classes should be self explanatory and easy to use.] To highlight the particular tab, use the "menu_active" class. For the normal tab, use the "menu_inactive" class.

   
       temp = temp + spacer
   
       temp = temp + "<A href=" & tab(i,1) _
   
         & " class=menu_active><B>&nbsp;" _
   
         & tab(i,0) & "&nbsp;</B></TD>"
   
   

7. If the value is not equal then concatenate the spacer between the tabs and write the html tag to specify the URL and display it using the required CSS class.

   
     else
   
       temp = temp + spacer
   
       temp = temp + "<A href=" & tab(i,1) _
   
         & " class=menu_inactive><B>&nbsp;" _
   
         & tab(i,0) & "&nbsp;</B></TD>"
   
     end if
   
   Next
   
   

8. Check for all array subscripts and exit the loop. Now, we are done with the routine required to generate the ASP Navigational bar.

Lets take a look at the details of how we can embed the routine into the ASP pages to generate the ASP Navigational bar.

ASP Template

We will first try to create a generic template by which we can generate as many pages as possible in a fly.

1. Create a new text file.

2. Copy and paste the following contents into the newly created text file and save it as template.asp. The Content to be copied as follows:

   Note: Please go ahead and change the content as you like. But I love this lay-out very much.

   
   

   <!--#include file="include/common.asp"--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>ezNavBar Version 1.0 :: Home Page</title> </head> <LINK href="include/navbar.css" type=text/css rel=stylesheet> <body topmargin=0> <table align="center" cellspacing=0 width="800" bgcolor=#000000> <tbody> <tr bgcolor=#6699CC> <td align=left colspan=2> <img src="images/Head.jpg"> </td> </tr> <tr> <td colspan=2></td> </tr> <tr bgcolor=#99ccff> <td align=left> <%navBar("Write down the name of the tab to be displayed")%> </td> </tr> <tr valign="top"> <td align="center" colspan=2></td> </tr> <tr> <td colspan=2 align=center> &nbsp;<font color="#ffffff" face=arial><h4>This is the Home Page for ezNavBar Version 1.0</h4></font>&nbsp; </td> </tr> <tr valign=middle bgcolor=#99bbff> <td align=center background="images/subfade.jpg" colspan=2> <b>"I have not failed. I've just found 10,000 ways that won't work." <br>--Thomas Alva Edison</b> </td> </tr> </tbody> </table> <center> <div align="center" class="bottom"> <br> If you have any Comments or Suggestions, Please mail me @ <b> <a href=mailto:prabu_tbn@yahoo.com>prabu_tbn@yahoo.com</a> </b><br> <br> </div> </center> </body> </html>

   
   

3. Save the file but don't close it, since there are more changes to be done.

4. While scanning through the file you would have come across the following sentence.

   <%navBar("Write down the name of the tab to be displayed")%>

   Replace "Write down the name of the tab to be displayed" with the name you've specified in the routine. For Example say "home", "about", "photos", etc.

   If you have replaced "Write down the name of the tab to be displayed" with "home" then the home page of the hosted site will get loaded and that particular tab will get highlighted.

   Now save and close the file. For example save the file as default.asp if the replaced string is "home".

5. Repeat this for as many files as you require by just renaming the template.asp file.

   1. Just copy the template.asp file and paste in that directory itself.
   2. Now a file named "Copy of template.asp" will be created.
   3. Just open that and follow the steps as above stated in step no 4 and save the file.
   4. Now renaming the file would suffice.

ASP Navigational Bar in Action

You can find the IISROOT in your machine at either

C:\Inetpub\wwwroot\

Or

D:\Inetpub\wwwroot\

Create a folder named mysite and now put all the files in the specified directory structure into the IISROOT of the web server. [either PWS or IIS 5.0]

Start the Browser and go to the URL.

http://localhost/mysite

Now you can see the navigation bar in action.

Mock-Up of ezNavBar V1.0

Here is a screenshot of what the navigation bar will look like:

Download

You can download a 15 KB zip file of all the code associated with this article from here.