我们的菜单样式完全模仿windowxp的蓝色主题的效果,所以大家可以看看windowxp的蓝色主题来体会实际的效果 在Menutest.htm里面,我们曾经写过这些代码: 1。<link rel="stylesheet" type="text/css" href="Menu.css"> 2。<WebMenu DataSource="xmlData" class="WebMenu" id="Menu1" Width="100" Effect="2" MenuType="1" Container="MenubarDiv"></WebMenu> 其中第一个是给页面链接一个样式表文件,第二个中有个class="WebMenu" ,它是通过menu.css里面的 .WebMenu{ BEHAVIOR: url("WebMenu.htc") } 来调用WebMenu.htc来将我们配置好的菜单xml数据转换成实际的HTML形式的菜单。
menu.css
.WebMenu{ BEHAVIOR: url("WebMenu.htc") }
//菜单表格的风格,其中用了一个阴影滤镜以增加菜单的立体感,最后的table-layout:fixed重要,因为表格可能因为它里面的内容自动调整,如果用了table-layout:fixed,那么我们指定是多少它就是多少。 .MenuPanel { border: 1px solid #002D96; cursor:hand; filter:progid:DXImageTransform.Microsoft.Shadow(enabled=true,color=#99CCFF,direction=135,strength=3); table-layout:fixed; }
//鼠标在菜单项上移动的时候需要模拟一个高亮的层 .ItemHightLightDiv { border: 1px solid #000080; background-color: #FFEEC2; position: absolute; z-index:6; height:23px; left:2px; cursor:hand; }
//鼠标在菜单项上移动的时候需要模拟一个高亮的表格 .ItemHighLightTable { table-layout:fixed; width:100%; height:100%; cursor:hand; }
//鼠标在菜单项上移动的时候需要模拟一个高亮的TD .ItemHL { padding-left:6px; font-size: 10pt; white-space:nowrap; }
//菜单一般状态下的样式 .ItemNormal { padding-left:4px; height:25px; font-size: 10pt; padding-top:2px; background-color: #F6F6F6; border-Bottom: 1px solid #F6F6F6; white-space:nowrap; }
//菜单项如果有分隔线,就用这个样式 .ItemNormalLine { padding-left:4px; padding-top:2px; height:25px; font-size: 10pt; background-color: #F6F6F6; border-Bottom: 1px solid #6A8CCB; white-space:nowrap; }
//菜单前两列是checkbox和图片,渐变的背景是跨两个TD,所以有左半边和右半边两个样式,因为渐变的滤镜对尺寸很敏感,所以我这里已经将滤镜注释掉,该用渐变的背景图片替代 .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); }
//菜单左列只有一个(或checkbox或pic),则渐变的背景跨一个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); }
//菜单的Div,也就是最外面的容器。 //一个Popup里面HTML层次是这样Body-Div(class='DivPanel')-Table(class='MenuPanel')-Tbody-TR-TD(class='PicColummFull/ItemNormal等') //这里要 visibility:hidden,以便能够使用各种菜单淡入的效果 .DivPanel{ position: relative; height: 1px; z-index: 2; visibility:hidden; }
//以下这些样式是当菜单作为置顶的主菜单的时候使用的
//主菜单鼠标滑过时高亮的黄色效果,这个黄色效果带垂直的渐变因为这里尺寸不确定因素不大,所以用渐变滤镜没发现什么问题
.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; }
//主菜单鼠标点击后时高亮的蓝色效果,这个蓝色效果带垂直的渐变,因为这里尺寸不确定因素不大,所以用渐变滤镜没发现什么问题 .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; }
//主菜单的外观效果 .Menubar{ background-color: #98B9E8; font-size: 10pt; height:24px; width:100%; cursor:hand; }
//主菜单条中菜单项原始效果,可以用作鼠标移出时还原的效果用 .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; }
到此为止,我们已经把菜单数据和样式大致讲解了以下,接下来的时间里我们就要进入最精彩的HTC组件的编程部分了。

|