An ASP included menu that highlights the current page

Whilst it's pretty easy to build a menu and highlight the current page's link using CSS and a "hook", I wanted to go one step further and automate the link highlighting and also have the whole menu in an included file.

Say we have six pages:


And six titles to go with them:

About Us
Our Products
Our Services
Contact Us

If we put the filenames & link titles into comma-separated strings and then split the strings into arrays, we can loop through them and build the menu dynamically.

To find what the current page is we can use Request.ServerVariables("SCRIPT_NAME") and so, if we add an id to the page link that matches matches Request.ServerVariables("SCRIPT_NAME"), all we then need to do is style it.

The markup for menu.asp:

<div id="menu">
Dim CurrentPage
CurrentPage = Request.ServerVariables("SCRIPT_NAME")
CurrentPage = Replace(CurrentPage, "/", "")
Dim PageStr, TitleStr, PageArray, TitleArray
PageStr = "index.asp,about.asp,products.asp,services.asp,contact.asp,links.asp"
TitleStr = "Introduction,About Us,Our Products,Our Services,Contact Us,Links"
PageArray = Split(PageStr, ",")
TitleArray = Split(TitleStr, ",")
For LoopCount = 0 To UBound(PageArray)
If StrComp(PageArray(LoopCount), CurrentPage) = 0 Then
Response.Write "<li><a href=""" & PageArray(LoopCount) & """ id=""current"">" & TitleArray(LoopCount) & "</a></li>"
Response.Write "<li><a href=""" & PageArray(LoopCount) & """>" & TitleArray(LoopCount) & "</a></li>"
End If

Include menu.asp in all six files:

<!--#include file="menu.asp"-->

Add some styling to the menu:

ul, li {
margin: 1px 0;
padding: 0;
list-style: none;
li a {
display: block;
padding: 3px;
width: 140px;
color: #FFF;
background-color: #3E6EC2;
text-decoration: none;
li a:hover, li a:active, li a:focus {
background-color: #6EC23E;
li a#current {
background-color: #C23E6E;

And that's it!

You can see it all in action here ;-)