Monday, 30 January 2012

ASP & CSS: highlight selected menu item


When creating menus for a web site, it is a good practise to use an inclusion, so that we write the menu only once. When the menu is included on every page, we might need to highlight the selected option in the menu itself.
For example, we can have a menu like:
  • Home Page
  • Option 1
  • Option 2
  • Option 3
When the user selects "Option 2" and load the related page, the menu should look like:
  • Home Page
  • Option 1
  • Option 2
  • Option 3
How can we do it? It's quite easy: we will use some ASP and CSS.

The menu
The menu is very simple in our example, but you will be able to apply the following concepts to any menu. Just for the sake of completeness we will consider the following structure:
 <li><a href="homepage.asp">Home Page</a></li>
 <li><a href="option1.asp">Option 1</a></li>
 <li><a href="option2.asp">Option 2</a></li>
 <li><a href="option3.asp">Option 3</a></li>
The above HTML code should be in your document which will be included on every page.

The ASP part
Now we need to know which is the name of the viewed page. To do so, we are going to use a simple ASP function. Add the following snippet in your menu page (just before or after the <ul> list):
Function getFileName()
  Dim lsPath, arPath
  lsPath = Request.ServerVariables("SCRIPT_NAME")
  arPath = Split(lsPath, "/")
  GetFileName =arPath(UBound(arPath,1))
End Function
Dim fileName
fileName =(getFileName)
As you can see, the "fileName" variable will be the name of the viewed page. We are going to use that variable in order to apply a specific CSS rule to the menu options.

Let's get back to the menu...

We need to change the <ul> list and make it look like:
 <li><a href="homepage.asp"><div <%if fileName="homepage.asp" then%>class="menuSelected"<%end if%>>Home Page</div></a></li>
 <li><a href="option1.asp"><div <%if fileName="option1.asp" then%>class="menuSelected"<%end if%>>Option 1</div></a></li>
 <li><a href="option2.asp"><div <%if fileName="option2.asp" then%>class="menuSelected"<%end if%>>Option 2</div></a></li>
 <li><a href="option3.asp"><div <%if fileName="option3.asp" then%>class="menuSelected"<%end if%>>Option 3</div></a></li>
That way, a div with class="menuSelected" will be added to the <li> that correspond to the page viewed.
Easy like that!

Now you only need to create appropriate CSS rules. In our example I will only create a simple rule for the menuSelected class:
.menuSelected {
       font-weight: bold;
It is clear that you can play around with your styles the way you prefer.

Hope you've found the post useful. As usual let me know what you think about it...


  1. This is the way I accomplish the same job (no need for a function). I had to remove some of the code to get it to post here >.<

    SCRIPT_NAME = Request.ServerVariables("SCRIPT_NAME")

    <'li><'div <%if SCRIPT_NAME="/homepage.asp" then Response.write class=""menuSelected"" %>>Home Page<'/div><'/li>

    1. Ben,

      that is great. A simple and elegant solution!


Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.