The demo at the top of this page uses one of the following configuration files:
<%
%>
instructions and rename)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.