Since the menu is built up of plain HTML and all the style declaration is defined in the external CSS file this can be modified to create a custom look and feel of the DHTML menu.

Small Update

To allow skins to work both the current page and the scriptlet needs to load the same css file. I've changed the script to do this automatically but one needs to add the id menuStyleSheet to the linked style sheet in the main page.

<link type="text/css" rel="stylesheet" href="someMenu.css" id="menuStyleSheet">

Customize the Look

The style changes are done by changing the class name. Note that the menu item gets the class name highlight when it is highlighted. By using the CSS selector rules one can change the style of the table cells and images inside the menu item.

table.menu tr           td   {}
table.menu tr.highlight	td   {background: highlight; color: highlighttext;}

This would result in the standard Windows 95/98 look (Some padding needs to be added as well). To get the Office 97 look one needs mark the cells with icons with the class name icon so that one can create a special rule in the CSS.

table.menu tr           td.icon     {text-align: center;}
table.menu tr.highlight td.icon     {background: transparent; text-align: center;}

table.menu tr           td.icon img {border: 1px solid buttonface;}
table.menu tr.highlight td.icon img {border-color: buttonhighlight buttonshadow buttonshadow buttonhighlight;}

The menu bar is built up using elements with the class name root and this is changed between rootHighligh and rootActive to represent the three modes

Changing borders

Due to the fact that borders are not displayed when table cells are empty one need to add the entity   to all empty. To be able to pick out leftmost and rightmost cell in the table one need to add a class name to these as well and since the Office 97 style uses the special class icon to make the icon look raised I used the class names left, middle and right.

<tr class="sub" menu="someMenu">
   <td class="icon"><img src="driveicon.gif"></td>
   <td class="middle">Save</td>
   <td class="more">4</td>
</tr>
<tr>
   <td class="left">&nbsp;</td>
   <td class="middle">Exit</td>
   <td class="right">&nbsp;</td>
</tr>

Below is a snippet from the SmartFTP Skin CSS file that shows how to define the rule for the left/icon table cell.

table.menu tr td.icon,
table.menu tr td.left             {text-align: center; border: 1px solid buttonface; border-right: 0px;}
table.menu tr.highlight	td.icon,
table.menu tr.highlight	td.left   {border-left:  1px solid buttonshadow; border-top: 1px solid buttonshadow; border-bottom: 1px solid buttonhighlight;}

Background Images

Background images can be done equally easy as well using the background css property. Below is a snippet from the QNX Skin.

table.menu tr td.more,
table.menu tr td.right             {font-family: webdings; width: 20px; text-align: right; padding: 1px;}
table.menu tr.highlight	td.more,
table.menu tr.highlight	td.right   {background: url('right.gif') repeat-x center right;}

Customizing the Menu Bar

The menu bar is built up of elements with the class name root but it can be any type of element and I've used a table with three cells with the class names left, middle and root here as well to be able to set the styles accordingly. This can be a bit cumbersome soo if your skin only needs to modify colors or the borders then you should probable stay with span elements.

Below is the HTML and CSS for the QNX Skin.

<div id="menuBar">
<table class="menuBar"
onmouseover="menuBarOver()"
onmouseout="menuBarOut()"
onclick="menuBarClick()"
cellspacing="1" cellpadding="0">
<tr>
   ...
   <td>
      <table cellspacing="0" cellpadding="0" class="root" menu="skinMenu">
      <tr>
         <td class="left"></td>
         <td class="middle">Skins</td>
         <td class="right"></td>
      </tr>
      </table>
   </td>
</tr>
</table>
</div>

.root .left              {background: url('left.gif'); width: 7px;}
.rootHighlight .left     {background: url('leftHighlight.gif'); width: 7px;}
.rootActive .left        {background: url('leftActive.gif'); width: 7px;}

.root .middle            {background: url('middle.gif'); text-align: center; font-family: tahoma; font-size: 11px; height: 19px; padding: 1px;}
.rootHighlight .middle   {background: url('middle.gif'); text-align: center; font-family: tahoma; font-size: 11px; height: 19px; padding: 1px;}
.rootActive .middle      {background: url('middleActive.gif'); text-align: center; font-family: tahoma; font-size: 11px; height: 19px; padding-left: 2px; padding-top: 2px; padding-right: 0; padding-bottom: 0;}

.root .right             {background: url('right.gif') center right; width: 7px;}
.rootHighlight .right    {background: url('right.gif') center right; width: 7px;}
.rootActive .right       {background: url('rightActive.gif') center right; width: 7px;}

That's it. This technique works with the dock bar and the popup menu as well so start creating...

Creating menus
Use menu as a popup menu
Plain menu with a framed page
Dockable menu
Customize the look
Download this sample