Click here to Skip to main content
15,741,818 members
Articles / Web Development / CSS
Posted 18 Oct 2008

Tagged as


26 bookmarked

MenuApart.Net based on a ListApart

Rate me:
Please Sign up or sign in to vote.
3.75/5 (5 votes)
18 Oct 2008CPOL3 min read
A XML listbased browser independent ASP.NET Menu
Image 1


Anyone who is interested in HTML design is probably familiar with 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 I called it MenuApart.Net. MenuApart.Net is lightweight, accessible, standards-compliant and cross-browser-compatible.


If you are not familiar with good and clean HTML design, you can take a look at the 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 :

<!-- Horizontal Upper Menu -->
<!-- SubMenu -->

	<Title>Create Customer</Title>
	<ToolTip>Here you can create customers</ToolTip>

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


... is set in CSS like this:

	    color: #fff;
	    background-color: #036;
	    color: #fff;
	    background-color: #369;
		color: #fff;
		background-color: #036;
	    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("" + e.Command);
            case "Christian Vos":
                Response.Redirect("" + e.Command);
                Response.Redirect("default.aspx?Command=" + e.Command);

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. 

//For this page the menu is changed:
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.


  • June, 2003 Initial Version 1.0


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Founder Rood Mitek
Netherlands Netherlands
Christian Vos .MCSD has been an independent Microsoft developer since 1999 and is specialized in distributed Microsoft .Net platform based Web applications. He is founder of the company Rood Mitek which has developed applications for companies like Philips Electronics, ASML, Lucent Technologies, Amoco, AT&T etc.

Comments and Discussions

GeneralMenuAdapter Suggested Pin
Matt Sollars21-Oct-08 5:42
Matt Sollars21-Oct-08 5:42 
GeneralUsing Response.Redirect in a PostBack event handler Pin
djhayman19-Oct-08 14:35
djhayman19-Oct-08 14:35 
GeneralRe: Using Response.Redirect in a PostBack event handler [modified] Pin
Christian Vos19-Oct-08 20:24
Christian Vos19-Oct-08 20:24 
Hi djhayman,

Thanks for your response;
The code is not adjusted for searchengine optimization, the reason that the response redirect is done in the codebehind is just to do something in the linkclick handler so some kind of action is displayed. The menu is
used as a "button line" replacement.

If you use the menu with a postback on click, it is best suited for web applications that don't need searchengine optimization. (e.g. intranet web applications).
If you want to use the menu for an internet website and also desire a searchengine optimization, you can indeed better place the response redirects in the XML file and make them an attribute of the Link Buttons in the repeaters (like it's done with width and tooltip).
The LinkButton should then be replaced for example with a non postback html element, like a html hyperlink and attributes should only be set with dynamic binding in the repeater and not in the codebehind.

The essence of the article is the dynamic listapart repeater, not how you should implement site navigation.


modified on Monday, October 20, 2008 2:48 AM

GeneralMenuApart Pin
ShyLock18-Oct-08 9:10
ShyLock18-Oct-08 9:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.