A Simple Tab Menu Control

A Simple Tab Menu Control

If you need a dynamic Menu for your ASP.NET website that should show up differently for different kinds of users, you need not look beyond the ASP.NET 2.0 Menu. It has umpteen properties (over 75!) that can be set declaratively to configure beautiful standards compliant Menus with no effort at all. But if all you need is a simple static Menu to navigate through a few pages, the ASP.NET 2.0 Menu could be overkill. Instead, you can consider building your own lightweight Tab Menu Control and play as you like with it.

Before we set out to build it, take a look at how the Menu will function once we finish.

Well if it looks a little drab that's because I'm focussing on the essentials. With some more colors & styles sprinkled in, you can make it look slicker. The whole deal is about highlighting the link that corresponds to the page the user is currently on. And we are going to do this with just Javascript.

The hyperlinks corresponding to the webpages of the site that will make up our Menu and the script that will highlight the selected page will all be rolled into a User Control. We can thus re-use the User Control as a Header for all our pages.

So here goes the source code of the Menu.ascx User Control -

<%@ Control Language="C#" ClassName="menu" %>

<script language="JavaScript" type="text/javascript">
<!--

//do the DOM - http://onlinetools.org/articles/unobtrusivejavascript/chapter2.html
function highlightCurrentPageLink()
{
//scan links only within the Menu container, the Table with ID header
if (document.getElementById('header').getElementsByTagName('a')) 
{
  var link;
  for (var i = 0; (link = document.getElementById('header').getElementsByTagName('a')[i]); i++)
  {
     if (link.href.indexOf(location.href) != -1)
     {
    document.getElementById('header').getElementsByTagName('td')[i].id = 'selected';
        document.getElementById('header').getElementsByTagName('a')[i].removeAttribute('href');
    document.getElementById('header').getElementsByTagName('a')[i].style.color="red";
        //header.getElementsByTagName('a')[i].setAttribute('title', 'this is the tool tip');
      }
   }
 }
}

window.onload = function() {
    highlightCurrentPageLink();
}
//-->
</script>

<STYLE TYPE="text/css">
body {
     font: 0.8em arial, helvetica, sans-serif;
}
       
#header a {
    text-decoration: none;
    display: block;
    background: #eee;
    color: #00c;
    width: 12em;
    text-align: center;
}

#header a:hover {
    background: #ddf;
}

#header #selected {
    border-color: black;

}

#header #selected a {
    position: relative;
    top: 1px;
    background: white;
    color: black;
    font-weight: bold;
}

#header td {
        float: left;
        border: 1px solid #bbb;
        margin: 0;
}
   
</STYLE>
<h1>Highlight current page link</h1>


<table  id="header">
<tr>
<td><a href="Page1.aspx">Page1</a></td>
<td><a href="Page2.aspx">Page2</a></td>
</tr>
</table>

<br/>

The workhorse in the code above is the Javascript function highlightCurrentPageLink(). It looks for links that match the the page the user is currently on.

function highlightCurrentPageLink()
{
//scan links only within the Menu container, the Table with ID header
if (document.getElementById('header').getElementsByTagName('a')) 
{
  var link;
  for (var i = 0; (link = document.getElementById('header').getElementsByTagName('a')[i]); i++)
  {
     if (link.href.indexOf(location.href) != -1)
     {
    document.getElementById('header').getElementsByTagName('td')[i].id = 'selected';
        document.getElementById('header').getElementsByTagName('a')[i].removeAttribute('href');
    document.getElementById('header').getElementsByTagName('a')[i].style.color="red";
        //header.getElementsByTagName('a')[i].setAttribute('title', 'this is the tool tip');
      }
   }
 }
}

We look for hyperlinks only within the TABLE that is our Menu container rather than ALL the hyperlinks in the page. Once we find a match, we set a style to the table cell that contains the matching link, remove the HREF attribute so that it is no longer clickable and change the color of the hyperlink text to red. We can optionally set a tooltip to the anchor tag.

Now that the Menu control is ready, we can drop it into any ASPX page. Here goes, one such page -

<%@ Register Src="menu.ascx" TagName="Menu" TagPrefix="My" %>
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Page 1</title>
</head>
<body>
    <form id="form1">
    <My:Menu runat="server" />
    <div>
    You are on Page 1
    </div>
    </form>
</body>
</html>

Summary - This Simple Tab Menu Control leverages the power of Javascript to detect the hyperlink that matches the page visitor is on and highlights it. If you need a lightweight multi-level static menu for your ASP.NET pages, you can adapt & wrap the Suckerfish Menu code into a User Control.

Code formatted with Jean-Claude Manoli's code formatter.

'Anil' Radhakrishna's Code Gallery