Clever Geek Handbook

ASP.NET Create a navigation menu style like windows.com

Just noticed that the windows.com navigation menu style is what I need for my site. I am wondering how to create a dropdown like this that has multiple columns. When the mouse hovers over each element, the column gives a preview of that element. Thank.

+1


source to share


4 answers


The menu is actually a DIV that appears on top of other content when you hover over a menu item. When you hover over the items in the menu, it calls some javascript to change the image displayed on the right side. Browse the source in your web browser and find the product menu. If you have Firefox with Firebug or a web developer plugin, you should be able to look at the javascript that handles the image change.



+2


source


Wow. When did they do it?

For this, Microsoft used its own AJAX library. Not sure if the ASP.Net AJAX library or anything of its kind are they built on purpose.

Tvanfosson summarized the bulk of this pretty well. The top menu is a tag <ul>

, each item <li>

containing a nested tag <span>

. This tag will be the one used to identify the top-level menu item that your mouse is hovering over.

Do a search in the source code and you will find:

<!-- BEGIN: Products Menu -->


This is the best example of the effect you are using. As said, this is an element that contains another unordered list. Each listitem contains a link whose mouseover event changes the image and text that appear in a separate one. You can see this area if you are looking for

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

Some good resources to get you started:

0


source


Microsoft's menu system is not like the menu system that mimics me ... look at how it displays (or really how it doesn't display) in FireFox.

0


source


The microsoft.com menu doesn't work in Chrome or Safari, but I doubt Microsoft cares.

0


source






More articles:


All Articles