webmenu编程精彩历程(三)菜单样式设计

王朝other·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航