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
First assign the argument which is derived from the function declaration to the variable curpage as follows:
curpage = navtab
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.
After having all the tabs in a two dimensional array we can start the HTML population for the navbar. Start the table tag first..
This "temp" variable will store all the details required to build the ASP Navigational Bar.
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
Then Check if the subscript value equals the value in the curpage variable.
if curpage = tab(i,0) then
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.
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
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.
Create a new text file.
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>
Save the file but don't close it, since there are more changes to be done.
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".
Repeat this for as many files as you require by just renaming the template.asp file.
Just copy the template.asp file and paste in that directory itself.
Now a file named "Copy of template.asp" will be created.
Just open that and follow the steps as above stated in step no 4 and save the file.
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.
