Just like for previous versions on the DHTML Menu the look and feel can be changed by changing the css file. In version 4 each menu can have its own css file but usually one wants to use the same file for all the menus. This is preferrably done by changing the prototype object for all the menus.
Menu.prototype.cssFile = "skins/officexp/officexp.css";
The css file used for the menu bar needs to be included in the page where
the menu bar is located. This is done by using the link tag.
<link type="text/css" rel="StyleSheet" href="skins/officexp/officexp.css" />
There are quite a few rules that needs to be defined to support all the features the menu system supports so it is ususally easier to change an already existing css file.
To get a feel for the structure of the menu code take a look at menulayout.html and view its source.
The menu consists of the body element and then two
divs that can be used to add more sophisticated borders. You should
use the divs for your borders and not the body. These two divs are
called outer-border and inner-border.
This is taken from skins/winclassic.css.
.menu-body {
background-color: Menu;
color: MenuText;
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
cursor: default;
}
.menu-body .outer-border {
border: 1px solid;
border-color: ThreedHighlight ThreeDDarkShadow
ThreeDDarkShadow ThreedHighlight;
}
.menu-body .inner-border {
border: 1px solid;
border-color: ThreeDLightShadow ThreeDShadow
ThreeDShadow ThreeDLightShadow;
padding: 1px;
width: 100%;
height: 100%;
}
Menu items are displayed as table rows. When an item becomes selected the
class name is set to hover. Therefore we set the highlight colors
in the .hover rule below.
.menu-body td {
font: menu;
}
.menu-body .hover td {
background-color: Highlight;
color: HighlightText;
}
Each table row contains 4 cells. These cells have the class names
icon-cell (or empty-icon-cell),
label-cell, shortcut-cell and finally
arrow-cell.
In case the menu item does not have an icon a span element is
inserted instead of an image and the class name of the cell is set to
empty-icon-cell to allow more detailed rules to be set up.
Below is some code from skins/office.css.
Notice how the border is set on the icon-cell when hovered.
.menu-body td.empty-icon-cell {
padding: 1px;
border: 0;
}
.menu-body td.empty-icon-cell span {
width: 16px;
}
.menu-body td.icon-cell {
padding: 1px;
border: 0;
}
.menu-body .hover td.icon-cell {
padding: 0;
border: 1px solid;
border-color: ThreeDHighlight ThreeDShadow
ThreeDShadow ThreeDHighlight;
background-color: transparent;
}
.menu-body td.icon-cell img {
width: 16px;
height: 16px;
margin: 0;
}
.menu-body td.label-cell {
width: 100%;
padding: 0px 5px 0px 5px;
}
.menu-body td.shortcut-cell {
padding: 0px 5px 0px 5px;
}
.menu-body td.arrow-cell {
width: 20px;
padding: 0px 2px 0px 0px;
font-family: Webdings;
font-size: 80%;
}
The menu bar is built up of a div with spans with
display set to inline-block. This allows the buttons
to have a defined width. Each button contains three more
spans. The reason for this is that one sometimes want special
images at the edges.
To get a feel for how the menu bar structure is done take a look at menubarlayout.html.
The class name for the menu bar is menu-bar and for the buttons
it is menu-button. When a button is hovered the class name is set
to menu-button hover. When the button is active (pressed down) the
class is set to menu-button active.
Below is the code skins/winclassic.css.
.menu-bar {
backgroun: ButtonFace;
cursor: default;
padding: 1px;
}
.menu-bar .menu-button {
background: ButtonFace;
color: ButtonText;
font: Menu;
padding: 3px 7px 3px 7px;
border: 0;
margin: 0;
display: inline-block;
white-space: nowrap;
cursor: default;
}
.menu-bar .menu-button.active {
padding: 3px 5px 1px 7px;
border: 1px solid;
border-color: ButtonShadow ButtonHighlight
ButtonHighlight ButtonShadow;
}
.menu-bar .menu-button.hover {
padding: 2px 6px 2px 6px;
border: 1px solid;
border-color: ButtonHighlight ButtonShadow
ButtonShadow ButtonHighlight;
}
These are the basic parts that you might want to change. There are a few more rules that you might want to edit as well. For example the rules for the radio button and check box menu items. For these check out skins/office.css or skins/officexp/officexp.css.
If you want to use background images take a look at the QNX skin
(skins/qnx/qnx.css). This skin uses the extra
spans inside the menu buttons to set the left and right background
images.
Then there are the disabled states where some of the skins uses the techniques explained in Cool Button 2.
Introduction
Menu Creation
Menu Bar Creation
Usage
API
Customizing look & feel
Demos
Download