Office XP

The demo at the top of this page uses one of the following configuration files:

style-officexp.js
Javascript configuration (for ASP config add <% %> instructions and rename)
style-officexp.ini
PHP configuration

And the following core images:

Plus these menu icons:

The icons are implemented by adding class names to particular links, like these for example: 

<li>	<a href="/menu/browsers/" class="msicon mschart">		Browser support	</a></li><li>	<a href="/menu/accessibility/" class="msicon mstask">		Accessibility tests	</a></li>

to go with this CSS: 

/* arrow position tweak for browsers other than IE5 and IE6 */ul[id="udm"] ul a:hover .udmA, ul[id="udm"] ul a:focus .udmA, ul[id="udm"] ul a.udmR .udmA {	top:-1px !important;	}/* menu icons */.msicon {	background-repeat:no-repeat;	background-position:2px 3px;	}.mschart {	background-image:url(/udm-resources-4.5/msicon-chart.gif) !important;	}.mschart:hover, .mschart:focus, .mschart:active {	background-image:url(/udm-resources-4.5/msicon-chart-rollover.gif) !important;	}.mstask {	background-image:url(/udm-resources-4.5/msicon-task.gif) !important;	}.mstask:hover, .mstask:focus, .mstask:active {	background-image:url(/udm-resources-4.5/msicon-task-rollover.gif) !important;	}

It's also a good idea to cache the icons, so you don't get a loading delay when first opening their menus: 

//cache menu iconsvar icons = [	'msicon-chart',	'msicon-chart-rollover',	'msicon-task',	'msicon-task-rollover'	];var iconsLen = icons.length;var imgs = [];for(var i=0; i < iconsLen; i++){	imgs[i] = new Image;	imgs[i].src = '/udm-resources-4.5/' + icons[i] + '.gif';}

For more about this please see the documentation about Menu icons.