ASP.NET Create style of nav menu like windows.com

Question

I'm newbee in asp.net. Just noticed that the style of the navigation menu on windows.com is just what i need for my website. I'm wondering how to create that kind of drop down list that has multiple columns. When the mouse hover on each item, the column gives a preview of that item. Thank you.

Answer 1

The menu is actually a DIV that displays on top of the other content when you mouseover the menu item. As you mouseover the items in the menu it invokes some javascript to change the image that displays on the right hand side. View the source in your web browser and look for the product menu. If you have Firefox with Firebug or the web developer plugin you should be able to look at the javascript that handles the image change.

Answer 2

Whoa. When did they do that?

Microsoft have used a native AJAX library to do this. Not sure if that's the ASP.Net AJAX library or something in-house they built-to-purpose.

Tvanfosson has summarised the bulk of it fairly well. The top menu is a <ul> tag, with each child <li> element containing a nested <span> tag. That tag will be the one that is used to identify the top-level menu item that your mouse hovers over.

Do a search in the source code and you'll find:

<!-- BEGIN: Products Menu -->

This is the best example of the effect you're after. As previously answered, it's a item that contains another unordered list. Each listitem in there contains a link whose mouseover event changes the image and text that appear in a separate . You can see that area if you search for

<div id="PageWrapper" class="HomePage">

Some good resources to start with would be:

• ASP.Net AJAX Samples
• jQuery Library
• Multi-level CSS Menu

Answer 3

The Microsoft menuing system doesn't seem like a menuing system worth emulating to me... look at how it renders (or really, how it doesn't render) in FireFox.

Answer 4

The microsoft.com menu doesn't work on Chrome or Safari either but I doubt that Microsoft cares.