Skip Navigation LinksHome : CBC Classes : ASP.Net : Menus & Navigation

CS218 ASP.Net - Navigation Controls (Building Menus and Breadcrumbs)


Many of the videos in this section use the site menuDemo. You can download a zipped up copy of the site if you want to play along at home.

  1. Getting started (video 11a1)
    1. Adding a menu
    2. Configuring the SitemapDataSource
    3. The web.sitemap
  2. Menu Orientation
    1. Vertical menus (video 11b1)
    2. Horizontal menus and configuring staticDisplayLevels to show more than Level 1 node (video 11b2)
    3. Youtube Video Tutorial - Vertical Menu Levels
    4. Youtube Video Tutorial - Horizontal Menu Levels
  3. Menu Appearance
    1. AutoFormat Colors, and setting width for menu items (video 11c1)
    2. All the d@rn colors! - change one to black, set to desired color
    3. Video Tutorial - Changing Menu Colors and Fonts
  4. Web.sitemap
    1. Basics. Parent nodes for top level menus, and child nodes for submenus (video 11d1)
    2. Fixing parent menu item click problem with no url or fake page and server.transfer (video 11d2, code)
    3. Web.sitemap - Hiding the Level 0 node (video 11d3)
    4. Relative vs. absolute paths for local file URLs
    5. Youtube Video Tutorial - building menus in the web.sitemap file
  5. Hiding Menu items for security - this is covered in the Membership section
  6. Breadcrumbs (video 10e1)
  7. Creating a sitemap page or treeview (Need video 11f1)
  8. Fixing dynamic menus in older IE and Chrome (Need video 11g1, Code )
  9. Multiple Menus and Sitemaps(code)
  10. Making Better Menus
    1. Making parent menu items NOT links (video 11h1)
    2. Using CSS to format menu and control click and hover (video 11h2)
      This isn't easy as it requires overriding some built-in JavaScript classes, not just adding the CSS.
  11. Changing from hover to click for parent menu nodes - method 1 replacing asp:menu with javascript (Need video, code)
  12. Changing from hover to click for parent menu nodes - method 2 replacing asp:menu with css (Need video, code)
  13. Changing from hover to click for parent menu nodes - method 3 fixing asp:menu with c# (Need video, code Stack OverFlow Tutorial , MShehabeddeen Tutorial - make sure and read the comments to get the best code )


Configuring the Number of Menu Levels To Display

Sometimes the way the Menu Control behaves may seem little weird, or at least not what you want. For example, by default you only see the top level menu item. In most situations I've run into I'd like to maybe see this top level item, but definately see the next level of items.

For example, look at this simple Web.sitemap:


  <siteMapNode url="default.aspx" title="Home" >
     <siteMapNode url="~/cbc/default.aspx" title="CBC Classes"  >
     <siteMapNode url="~/webDesign/default.aspx" title="Web Design"  >
  </siteMapNode>

Everytime I run into this I think it should display a menu like the following:

  Home
  CBC Classes
  Web Design

But what gets displayed is this:

  Home

The problem is that, by default, the menu only displays one level of static items. The solution to this problem is to configure the menu's staticDisplayLevel property to 2. This means that the menu will always display the information for the top level siteMapNode element, as well as it's direct children. For the simple example, it will display the following:

Home
  CBC Classes
  Web Design

You can set the staticDisplayLevel property to 3 or more, depending on how many levels you want to display.

Remember that the staticDisplayLevel property controls how many levels are displayed when the menu just sits there. Any sub-menus not displayed in the static menu, will be displayed when the user moves the cursor over the menu ... which is why it's called the MaximumDynamicDisplayLevel property.

Another solution is to not display the top level menu item, or in the case of our example the "Home" link. I always have to hunt for the property used to control this, because it's not a property of the menu object, it's the ShowStartingNode property of the SiteMapDataSource object. If this property is set to false, then the top level menu is not displayed ... which also means that you may want to decrease the staticDisplayLevel property by one.

Both of these solutions work well, the deciding factor is simly whether or not you want the top level menu to display or not.

The last little visual thing you may want to fix is lining up the left margin of the top level item with the other items.

By default, each time a sub-level is displayed it is indented. (The amount of indentation is controlled by the DynamicVerticalOffset property.) One solution is to set this to 0, in which case every level of the menu will appear to be aligned ... but personally I like to keep the indentation, as it's a great visual aid.


Fixing Menus for IE7/8

I know I've said this before, but the folks at Microsoft have really made it simple to create web sites. All of the things that I used to do, that took hundreds, if not thousands of lines of code to create can now be created by dragging a control off a menu. And even better, the HTML/XHTML that is created has been moving away from quirky code to code that meets web standards.

The only control that I've found that has suffered from problems in the latest evolutions of ASP.Net is the menu control. If you have dynamic menus in your ASP.Net web site, they may not display in IE8. They work great in Firefox and other browsers, but they only work in IE8 if it's in compatibility mode; which is not cool.

Luckily there are several ways to solve the problem. One is to load a patch, another from Mark Hildreth is to add a little CSS to force the z-index for the menu to display it correctly. I like the CSS fix better, so I'm adding the details here. It's a pretty simple two step process. (This assumes that you already have a dynamic menu added to your page.) Do this on your masterpage.

  1. The first is to add the CssClass attribute to the DynamicMenuStyle element. I used the class name fixMenu, but you can use whatever you want as there's nothing significant about the class name. However, make sure and only use alphanumeric characters, and NO SPACES!
  2. The last thing is to go back to the head section of your document and add the CSS rules to change the z-index for the class. I set mine to 100, because I like to count by 100's so I leave myself room to manuver if I ever want to add other layers between. You can set your's to whatever you'd like, just make sure it's above any other objects.

The menu control

  <asp:Menu ID="Menu1" runat="server">
    <DynamicMenuStyle CssClass="fixMenu" />
  </asp:Menu>

The CSS

  <style type="text/css">
    .fixMenu {  z-index: 100; }
  </style>


Different Menus and Sitemaps

If you want to use different menus in different places on your web site then you have to create more than 1 sitemap file. Make the sitemap file(s) just like you did the first one (r-click on the folder you want it in, select Add New Item and then choose Site Map from the list. You can name it whatever you want, but I suggest you use .sitemap as the extension. The data in the second sitemap file is just like the original.

Once you have the extra sitemap, the next step is to tell your project that it exists by adding some information to the project's web.config file. The following information should be added in the system.web section of the main web.config.

   <siteMap defaultProvider="siteMap1">
      <providers>
        <add
          name="siteMap1"
          type="System.Web.XmlSiteMapProvider"
          siteMapFile="~/Web.sitemap" />
        <add
          name="siteMap2"
          type="System.Web.XmlSiteMapProvider"
          siteMapFile="~/Web2.sitemap" />
      </providers>
    </siteMap>

You need to create one of the add sections for each one of your sitemaps, including your default. Change the siteMapFile so that it points to one of your sitemap files. The name can be whatever you want, just remember to only use letters and numbers, and use a different name for each sitemap. The type will always be type="System.Web.XmlSiteMapProvider.

In the first line, the defaultProvider="siteMap1" says which of your sitemap data files will be the default. This is the one that will be used by any sitemap/menu controls, unless you specify a different one. So set defaultProvider to the name you used in one of your add sections.

To change the sitemap file used by a sitemap control, change (or set) the SiteMapProvider in the SiteMapDataSource control to the name you set in the add section of the web.config for that sitemap file. For example, to use the sitemap file associated with the name siteMap2 I use:

  <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" SiteMapProvider="siteMap2" />
Here's the Microsoft MSDN page with more details about the sitemap and sitemap datasource.


Automatically redirecting to another .aspx page on

Here's the code for automatically transferring to another page, when the current page loads.

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
      server.transfer("default.aspx")
    End Sub