Our menu style completely imitates the effect of Windowxp's blue theme, so everyone can look at the blue theme of WindowXP to experience the actual effect.
In menutest.htm, we have written these code:
1.
2.
The first one is to link a style sheet file to the page, and there is a class = "WebMenu" in the second one, it is inside menu.css
.Webmenu {
BEHAVIOR: URL ("WebMenu.htc")
}
To call WebMenu.htc to convert our menu XML data into a menu in the actual HTML form.
Menu.css
.Webmenu {Behavior: URL ("WebMenu.htc")}
// Menu table's style, where a shadow filter is used to add a manifest, the last table-layout: fixed is important, because the table may be automatically adjusted because of the content it, if you use Table-Layout: fixed, So how much is we specified? .MenuPanel {border: 1px solid # 002D96; cursor: hand; filter: progid: DXImageTransform.Microsoft.Shadow (enabled = true, color = # 99CCFF, direction = 135, strength = 3); table-layout: fixed;}
/ / The mouse needs to simulate a highlighted layer when moving on the menu item .ItemHightlightdiv {Border: 1px solid # 000080; Background-Color: # ffeec2; Position: absolute; z-index: 6; Height: 23px; Left: 2px; cursor: hand;
/ / The mouse needs to simulate a highlighted table when moving on the menu item .ItemHighlightTable {Table-Layout: fixed; width: 100%; Height: 100%;
// The mouse needs to simulate a highlighted td.itemhl {padding-left: 6px; font-size: 10pt; WHITE-SPACE: NOWRAP;
// Menu in the general state of the style .itemnormal {padding-left: 4px; Height: 25px; font-size: 10pt; padding-top: 2px; Background-Color: # f6f6f6; border-bottom: 1px solid # f6f6f6; white; -sspace: now: nowrap;
// Menu item If there is a separation line, use this style. ItemMnormalalline {padding-left: 4px; padding-top: 2px; height: 25px; font-size: 10pt; Background-Color: # f6f6f6; border-bottom: 1px Solid # 6a8ccb; White-Space: Nowrap;} // The first two columns of the menu are Checkbox and the image. The gradient background is cross two TDs, so there is two styles of the left half and the right half, because the gradient filter is very small. Sensitive, so I have released the filter from the gradient background. Piccolummlefthalf {Padding-Left: 7px; Height: 25px; width: 26px; Afilter: progid: DxImageTransform.microsoft.gradient (startcolorstr = # e3efff , endcolorstr = # 8EB3E7, gradientType = 1); background-image: url (LeftHalf.gif);} PicColummRightHalf {height:. 25px; width: 26px; padding-left: 5px; afilter: progid: DXImageTransform.Microsoft.gradient ( Startcolorstr = # 8eb3e7, endcolorstr = # 888Aee4, gradienttype = 1); Background-Image: URL (Righthalf.gif);
// Menu left column only one (or Checkbox or PIC), the gradient background across a Td.PiccolummFull {Padding-Left: 5px; Height: 25px; width: 26px; Afilter: progid: DxImageTransform.microsoft.gradient (startcolorstr = # DDECFE, EndColorstr = # 81A9E2, gradientType = 1); Background-Image: URL (Fullbg.gif);
// Menu DIV, that is, the outermost container. // The HTML hierarchy in a popup is such a Body-Div (Class = 'DivPanel') - Table (Class = 'MenuPanel') - TBODY-TR-TD (Class = 'PiccolummFull / ItemNormal, etc.) / / here To visibility: Hidden so that you can use a variety of menus fade in. Divpanel {Position: Relative; Height: 1px; z-index: 2; visibility: hidden;
// The following style is the yellow effect using // main menu mouse when the menu is used as the main menu of the top, and the yellow effect is vertical gradient due to the size uncertain factor here, so it is filtered. mirror found nothing wrong .MenubarHLYellow {text-align: center; padding-right: 4px; padding-left: 4px; padding-top: 1px; padding-bottom: 1px; filter: progid: DXImageTransform.Microsoft.gradient (startcolorstr = # Fff4cc, endcolorstr = # ffd79d, gradienttype = 0); border: 1px solid # 000080;
// Main mesh mouse Click the blue effect, this blue effect is vertical gradient, because the size of the size is not large here, so it is not found with the gradation filter. MenuBarhlblue {text-align: center ; padding-right: 4px; padding-left: 4px; padding-top: 1px; padding-bottom: 1px; filter: progid: DXImageTransform.Microsoft.gradient (startcolorstr = # E3EFFF, endcolorstr = # 98B9E8, gradientType = 0); Border: 1px solid # 000080;} // main menu looks. Menubar {background-color: # 98b9e8; font-size: 10pt; height: 24px; width: 100%; cursor: hand;}
The original effect of the menu item in the main menu bar can be used as the effect of the reduction when the mouse is removed. MenuBarnormal {font-size: 10pt; White-Space: Nowrap; Padding-left: 4px; padding-right: 4px; padding- Top: 1px; padding-bottom: 1px; Cursor: hand; border: 1px solid # 98b9e8;} To this, we have already explained the menu data and style. We have to enter the most exciting time in the next time. The programming part of the HTC component.
