Displaying Menu Control Horizontal With SubMenus

Menu controls in ASP.NET 2.0 are pretty cool. I wanted to display the menu horizontally with Sub Menus on some of the menu item and I was able to do this in few minutes.

Check out the screen shot below to see what I am talking about:

The code is also pretty straight forward. First thing you need is a Web.sitemap file which will contain the text and the url of the links that you will display on the menu control.

Web.sitemap:

<?xml version="1.0" encoding="UTF-8"?>
<siteMap>
  <siteMapNode url="default.aspx" title="root">
    <siteMapNode url="subMenu.aspx?A=1" title="Home">
    </siteMapNode>

    <siteMapNode url="subMenu.aspx?B=1" title="Students">
      <siteMapNode url="e.aspx" title="Add Student"></siteMapNode>
      <siteMapNode url="f.aspx" title="Drop Student"></siteMapNode>
      <siteMapNode url="g.aspx" title="View All Students"></siteMapNode>
      <siteMapNode url="h.aspx" title="Kick Student Butt"></siteMapNode>
    </siteMapNode>
  </siteMapNode>
</siteMap>

Next thing you need is a source which will absorb the contents of web.sitemap file and spit it on the menu control. In the code below I am using XmlSiteMapProvider and SiteMapDataSource. IF you are interesting in using some other datasource for your menu control then I suggest you check out this article Populating Menu Control with Different Sources.

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            CreateMenuControl();
        }
    }

    private void CreateMenuControl()
    {
    TabStripMenu.DataSource = GetSiteMapDataSource();
        TabStripMenu.DataBind();
    }
    private SiteMapDataSource GetSiteMapDataSource()    {

        XmlSiteMapProvider xmlSiteMap = new XmlSiteMapProvider();
        System.Collections.Specialized.NameValueCollection
        myCollection = new System.Collections
        .Specialized.NameValueCollection(1);
        myCollection.Add("siteMapFile", "Web.sitemap");
        xmlSiteMap.Initialize("provider", myCollection);
        xmlSiteMap.BuildSiteMap();
        SiteMapDataSource siteMap = new SiteMapDataSource();
        siteMap.ShowStartingNode = false;
        return siteMap;
    }

Posted on Thursday, March 2, 2006 3:39 PM | Back to top