Dynamic Drop-Down Menus in ASP.Net 2.0 / 3.5

One of the most essential components to a solid site is a versatile and intuitive navigational drop-down menu. There are many ways to do this. My goals, as always, when approaching a challenge:

1. Let's not reinvent the wheel.
   There are many solutions out there. A big point of the .NET Framework is to provide reusable components so that you don't have to code things from scratch. Chances are it's already been developed and developed well.
   
   
2. Avoid hard-coding where possible.
   It's all HTML, CSS, and Javascript by the time the menu renders in your browser, but that doesn't mean you need to code it in that way. We're trying to build something dynamic and avoid duplicating code from page to page. That means there is going to be a data feed, whether from XML or a database, and a control that can process and display this feed from page to page.
   
   
3. Create an elegant, cross-browser compliant solution.
   Some of the out-of-the-box ASP.Net menu controls are not that pretty and don't really work across all browser platforms, especially Safari (Webkit based... speaking of which - guess what Google's Chrome uses ;-) ) We need something that will be readable, easy to maintain, and most importantly, work across all browsers.
   

I found a couple of methods out there to accomplish this. Peter Bromberg talks about one way in his blog here (http://www.eggheadcafe.com/tutorials/aspnet/f4bf9b1a-c934-43be-b026-9f3443fc87c9/build-an-aspnet-20--xml.aspx).

It's a variation of an ASP.Net 1.1 solution previously published in 2003 by WROX. It works, but it's a slight modification from the 1.1 version, and it seemed a little cumbersome to customize the look and feel, so I continued to look for something designed specifically for 2.0 and up that would be simple to use out-of-the-box and easy to customize.

Surely enough, I stumbled upon a solution that met my three goals, written by ScottGu (http://weblogs.asp.net/scottgu/archive/2006/05/02/444850.aspx)

To build a drop-down menu, we need the following:

1. Data Feed
2. CSS Stylesheet
3. Server-side control that will generate a menu from #1 and #2.

The data feed is your standard web.sitemap (http://msdn.microsoft.com/en-us/library/system.web.sitemap.aspx) that you can build in Visual Studio that looks something like this:

<xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

<siteMapNode url="" title="" description="">

<siteMapNode url="" title="" description="" />

<siteMapNode url="" title="" description="" />

</siteMapNode>

</siteMap>

The server side control is our typical with a SiteMapProvider, which is just responsible for reading in the data feed - in this case our web.sitemap file.

The CSS is the tricky part. Using out-of-the-box simplified customizations won't get you your desired result, and if it will, chances are it probably won't look the same from browser to browser. Our solution:

CSS Control Adapter Toolkit for ASP.Net 2.0
You can download it here: http://www.codeplex.com/cssfriendly

The toolkit essentially takes the worry out of coding for cross-browser compliance by providing ASP.Net controls that are already formatted in CSS to look pretty and the same in all common browsers, which is fantastic, because usually, you have to buy a component like this.

For our drop-down menu, you can do vertical or horizontal; it uses CSS best practices by utilizing ul/li's instead of tables.

Check out ScottGu's blog to get the code, documentation, and a more detailed explanation of exactly how to build, install, and use the drop-down menu with the CSS Control Adapter Toolkit.

As always, I welcome your comments.

UPDATE - 9/22/08
As it turns out, the vertical menu doesn't display the sub-items properly in IE6. That doesn't work for me as more than 45% of my user base is on IE6. Stay tuned and I will post a fix for it.

Applies to:
asp.net 2.0 asp.net 3.5 microsoft visual studio 2005 visual studio 2008 css xml menu drop-down navigation control adapter toolkit