What is the best menu for an ASP.Net application?

Question

What do you find to provide the best menu for an ASP.Net 2.0 - 3.5 web application? Suggestions do not have to particularly be ASP.Net controls, but could be other menu's that work well within an ASP.Net web application.

I would like for the suggestions to be options that do not require purchasing or royalty fees. OpenSource suggestions would be even better.

Answer 1

I've found that the most flexible is to use CSS to style an unordered list like this:

<div id="nav_main" >
<ul>
  <li id="current">Button 1</li>
  <li><a href="#">Button 2</a></li>
  <li><a href="#">Button 3</a></li>
  <li><a href="#">Button 4</a></li>
  <li><a href="#">Button 5</a></li>
</ul>
</div>

You'll find many CSS ways to style this kind of list with hover background images, etc.

Now if you are using Webforms and you want to use your sitemap, then I would suggest using a Repeater and NOT use the menu control. You will have the most control of your generating your list this way.

Similarly, if you are using ASP.NET MVC, you can do a foreach on your sitemap to create your list.

This of course is just for simple menus, but it can be expanded to include more complicated menus. I've found the following CSS-styled menu to be very good: http://www.lwis.net/free-css-drop-down-menu/

Answer 2

YUI buttons or menu controls (works with existing HTML):

http://developer.yahoo.com/yui/examples/button/btn_example07.html

An ASP.NET library that wraps these controls very nicely, released in December 2008:

http://www.codeplex.com/YUIAspNet/

JQuery suckerfish menu, works by using ul,li elements:

http://be.twixt.us/jquery/suckerFish.php

Answer 3

I use jQuery Superfish: http://users.tpg.com.au/j_birch/plugins/superfish/. Highly recommended by others as well.

Answer 4

I also like to create unordered lists. It lets the designer be flexible with the menus. They can use their own js+css solution to create drop down menus or style it nicely for static menus. The same html can easily become left hand, across the top, drop down, or even a full site map with css changes.

To that note, I like to store the site map data in a hierarchal data structure and use a recursive lambda to generate it. For an example see this small console app below with its output.

output html

<li><a href="/">First</a><li><a href="/firstsub.aspx">FirstSub</a></li><li><a hr
ef="/secondsub.aspx">SecondSub</a></li></li><li><a href="/second.aspx">Second</a
></li>

the source c#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace SiteMapDemo
{
    class MenuItem
    {
        public Guid ID {get; set;}
        public Guid? ParentID{get;set;}
        public string Name { get; set; }
        public string Path { get; set; }
        public int Rank { get; set; }
    }
    class Program
    {
        static void Main(string[] args)
        {
            List<MenuItem> menu = new List<MenuItem>(new[]{
                new MenuItem{ID = Guid.NewGuid(), Name = "First", ParentID=null, Path="/", Rank=0},
                new MenuItem{ID = Guid.NewGuid(), Name = "Second", ParentID=null, Path="/second.aspx",Rank=1},
            });
            menu.AddRange(new[] { 
                new MenuItem{ID = Guid.NewGuid(), Name = "FirstSub", ParentID=menu[0].ID, Path="/firstsub.aspx",Rank=0},
                new MenuItem{ID = Guid.NewGuid(), Name = "SecondSub", ParentID=menu[0].ID, Path="/secondsub.aspx",Rank=1},
                });
            Func<List<MenuItem>, Guid?, string> renderMenu = null;
            renderMenu = (menus, Parent) =>
            {
                var sub = menus.Where(m => m.ParentID == Parent).OrderBy(s=>s.Rank).ToList();
                if (sub.Count > 0)
                {
                    StringBuilder sb = new StringBuilder();
                    sub.ForEach(s => { sb.Append(String.Format("<li><a href=\"{0}\">{1}</a>{2}</li>", s.Path, s.Name, renderMenu(menus, s.ID))); });
                    return sb.ToString();
                }
                return "";
            };
            Console.Write(renderMenu(menu, null));
            Console.ReadLine();
        }
    }
}