WebMenu Programming Wonderful History (3) Menu style design

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 is to page link link A style sheet file, there is a class = "WebMenu" in the second one, it is called WebMenu.htc to call WebMenu.htc by menu.css. WebMenu {Behavior: URL ("WebMenu.htc")}. Menu XML data is converted 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 increase the three-dimensional sense of the menu, the last table-layout: fixed is important because the table may Because the content inside is automatically adjusted, if you use Table-Layout: Fixed, then how much is it specified?

.MenuPanel {border: 1px solid # 002D96; cursor: hand; filter: progid: DXImageTransform.Microsoft.Shadow (enabled = true, color = # 99CCFF, direction = 135, strength = 3); table-layout: fixed;} / / Movement When moving on menu items, you need to simulate a highlighted layer .ItemHightlightdiv {Border: 1px solid # 000080; Background-Color: # ffeec2; position: absolute; z-index: 6; Height: 23px; Left: 2px Cursor: hand;} // Movement when moving on menu items Need to simulate a highlighted form .ItemHighlightTable {Table-layout: fixed; width: 100%; Height: 100%; Cursor: hand;} // mouse When moving on the menu item, you need to simulate a highlighted td.itemhl {padding-left: 6px; font-size: 10pt; white-space: Nowrap;} // menu general state in the general state .itemnormal {Padding-Left : 4px; Height: 25px; font-size: 10pt; padding-top: 2px; Background-color: # f6f6f6; border-bottom: 1px solid # f6f6f6; white-space: Nowrap;} // menu item If there is a separation , Use this style .itemnormalline {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 are two styles of the left half and the right half, because the gradient filter is very sensitive to the size, so I have filterible it here. Release the mirror, the background picture of gradient Alternatively .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 = # 88AEE4, 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);