ASP 101 - Active Server Pages 101 - Web04
The Place ASP Developers Go!

Please visit our partners


Windows Technology Windows Technology
15 Seconds
4GuysFromRolla.com
ASP 101
ASP Wire
VB Forums
VB Wire
WinDrivers.com
internet.commerce internet.commerce
Partners & Affiliates














ASP 101 is an
internet.com site
ASP 101 is an internet.com site
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash



 Top ASP 101 Stories Top ASP 101 Stories
What is ASP?
VBScript Classes: Part 1 of N
Migrating to ASP.NET

QUICK TIP:
Batch your code to save processing time
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates


Customizable ASP Tab Navigational Bar

by Prabhu Kumar M

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> </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> "&tab(i,0)&" </B></TD>"
   else
      temp = temp + spacer
      temp = temp + "<A href="&tab(i,1)&" class=menu_inactive>" _
         & "<B> "&tab(i,0)&" </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.

Note: From here onwards, throughout the article the terms "application" and "system" refer to the complete website to be hosted.

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> </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> " _
          & tab(i,0) & " </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> " _
          & tab(i,0) & " </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>
         <font color="#ffffff" face=arial><h4>This is the
        Home Page for ezNavBar Version 1.0</h4></font> 
       </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:

Screen Capture of ezNavBar V1.0

Download

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


Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers