ASP & CSS: highlight selected menu item

Tweet

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:

<ul>
 <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>
</ul>

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):

<SCRIPT Language=VBScript RUNAT=SERVER>
Function getFileName()
  Dim lsPath, arPath
  lsPath = Request.ServerVariables("SCRIPT_NAME")
  arPath = Split(lsPath, "/")
  GetFileName =arPath(UBound(arPath,1))
End Function
</SCRIPT>
<%
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:

<ul>
 <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>
</ul>

That way, a div with class="menuSelected" will be added to the <li> that correspond to the page viewed.
Easy like that!

The CSS

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...