Introduction
Anyone who is interested in HTML design is probably familiar with www.alistapart.com and table-less HTML development.
Based on the philosophy of this site and Jeffrey Zeldman himself, I wanted to develop a list based menu that can be deployed in ASP.NET with the help of a configurable .NET control.
Requirements of the menu should be: easy to deploy, configure, style and maintain and generates light weighted HTML code that works in most mainstream browsers.
Because the menu is based on HTML list items (see Suckerfish Dropdowns in alistapart.com) I called it MenuApart.Net. MenuApart.Net is lightweight, accessible, standards-compliant and cross-browser-compatible.
Background
If you are not familiar with good and clean HTML design, you can take a look at the alistapart.com site or Google on "alistapart". This will give you plenty of information to understand the need of lightweight, standards-compliant, cross-browser-compatible HTML design.
Using the Code
The code consists of two XML source files which contain the source data for the main and sub menus and 2 repeaters which will generate a list based menu.
The menu itself is an .NET User Control that can be registered in an ASP.NET Master Page or a normal ASP.NET Web page. This depends on how you want to use the menu and if you are using a MasterPage driven Web Application.
The style of the menu is completely controlled with CSS and it is very easy to give it the style you want for your Web application.
The following snippet shows the XML code that is fairly simple and easy to maintain :
<MainMenu>
<Title>Customers</Title>
<Command>Customer</Command>
<Width>93px</Width>
<ToolTip>Customers</ToolTip>
</MainMenu>
<SubMenu>
<ParentItem>Customers</ParentItem>
<Title>Create Customer</Title>
<Command>CustomerCreate</Command>
<Width>93px</Width>
<ToolTip>Here you can create customers</ToolTip>
</SubMenu>
A .NET DataSet is filled with the XML data and will be DataBinded to the corresponding repeaters.
It is easy to manipulate the generated MenuApart. For example, you can give a menu item another style with the statement:
Master.MenuApartSetActive = command;
The command is a string set in the XML DataFile and binded to a LinkButton part of the menu. The command string can be passed through by session or querystring or directly cached from the MenuApart LinkClick handler. It can be used to control page redirections or to trigger methods or raise events.
With the following code, you can give a certain menu item another style. The style analogue to the command...
Master.MenuApartSetActive
... is set in CSS like this:
.MainNormal
{
color: #fff;
background-color: #036;
}
.MainActive
{
color: #fff;
background-color: #369;
}
.SubNormal
{
color: #fff;
background-color: #036;
}
.SubActive
{
color: #fff;
background-color: #369;
}
Properties like the Width, Tooltips, etc. can be set in the XML file. When more properties are needed, you can add a property to the XML file and make it an attribute of
the used LinkButton in the MenuApart control.
The MenuApart controls main event is the MenuApart_LinkClick event. This event will give you the flexibility to do whatever is needed after a menu item is clicked by a user.
protected void MenuApart1_LinkClick(object sender, MenuApartEventArgs e)
{
switch (e.Command)
{
case "RoodMitek":
Response.Redirect("roodmitek.nl?Command=" + e.Command);
break;
case "Christian Vos":
Response.Redirect("christianvos.nl?Command=" + e.Command);
break;
default:
Response.Redirect("default.aspx?Command=" + e.Command);
break;
}
}
Every WebPage can have its own configuration of the MenuApart.Net control. This is possible by giving the MenuApart.Net a different XML source. You can register just a single control in a Master Page and still let every WebPage under this MasterPage have its own different menu.
string filePath = ConfigurationManager.AppSettings["MenuApartContact_SettingsFile"];
Master.MenuApartSourceFile = filePath;
Points of Interest
Because the .NET Repeater control is so flexible and light weight, you can shape and style the menu just as you want, horizontal, vertical, cascade, etc., but remember that you should never use the <table></table> tags.
History
- June, 2003 Initial Version 1.0
