MSDN Dhtml Menus?

[greddin]

How is the menu created on Microsoft's MSDN Site (msdn.microsoft.com)? Not the top, but the one on the left side that has the shadow effect around the edge.

I would like to create something like this, can anyone help?

Thank you.

[wranlon]

It's all in the code ... It bothers me when people say that to me, so I feel especially bad that I must say it here.

MSDN's side menus are somewhat embedded in their standard resource files, so tracing the references just for the menus requires rooting around in several places.

First, the drop shadow. There is nothing really special about it, it's just not out in the open. Here's where you can find out how it is made:

1) The main page references the following CSS file:
/library/flyoutmenu/default.css

2) The above CSS file references a DHTML Behavior, which is IE 5 only:
/library/flyoutmenu/default.htc

3) The behavior includes a function named "makeRectangularDropShadow", which performs all the magic of the drop shadow. In other words, it creates a DIV, sets the dimensions and a background color on that DIV, and applies an alpha filter.

You may be wondering: hey, if you're going to use filters, why not just use the drop shadow filter? Unfortunately (so I've found) the drop shadow filter causes the element focus to be offset by the level of the drop shadow, and that in turn would slightly change the location for where the mouse events occur.

The rest of the menu: Looking at the source for MSDN, search for one of the main menu items, and you will come across a function call for addICPMenu. This function is defined in /library/toolbar/toolbar.js, and, after tweaking a few values, invokes addMenu, also defined in toolbar.js. addMenu builds up the HTML used to create each top level menu item.

Anyway, I think it would be somewhat painful to try to pull out just the MSDN menu code from the rest of it. You might try starting with CoolMenus, which (if memory serves) does include some nifty filter examples. If you really want the MSDN menus, you will need to download several external files, including the ones referenced above.

[greddin]

Thanks! I didn't know about the htc file. That's probably what I've been missing. Thanks for taking the time to explain it. You did a great job!