Dynamic Drop-Down Menus in ASP.Net 2.0 / 3.5(feeds.feedburner.com)
submitted by 
caughtinthedotnet(40) 3 years, 4 months ago
One of the most essential components to a solid site is a versatile and intuitive navigational drop-down menu.
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.
|category: ASP.NET
|Views: 128
tags:
ASP.NET another
Everyones tags:
Your Tags: