我们的菜单样式完全模仿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组件的编程部分了。
|
本类阅读TOP10