webmenu编程精彩历程（三）菜单样式设计

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

本文地址：http://com.8s8s.com/it/it42863.htm