2009年11月17日 星期二

如何使 ASP.NET 元件 MENU 能夠更漂亮 CSS

套用以下基本CSS,再依個人審美觀做適當的修改
<asp:Menu ID="Menu1" runat="server" CssClass="menu_Main" DynamicHorizontalOffset="2"
Orientation="Horizontal" StaticSubMenuIndent="10px" Width="296px">
<StaticMenuStyle CssClass ="menu_StaticMenuStyle" />
<StaticMenuItemStyle  CssClass="menu_StaticMenuItemStyle " />
<StaticHoverStyle CssClass="menu_StaticHoverStyle" />
<StaticSelectedStyle CssClass="menu_StaticSelectedStyle"/>
<DynamicMenuStyle CssClass="menu_DynamicMenuStyle" BackColor="#F8F8D4" />
<DynamicSelectedStyle CssClass="menu_DynamicSelectedStyle"  />
<DynamicHoverStyle  CssClass ="menu_DynamicHoverStyle"/>
<Items>
</Items>
</asp:Menu>
/*menu style*/
.menu_Main{
height:30px;
}
.menu_StaticMenuStyle{
}
.menu_StaticMenuItemStyle {
width:70px;
font-size:15px;
/*HorizontalPadding="5px" VerticalPadding="2px"*/
}
.menu_StaticHoverStyle{
color:#FFFFFF;
background-color:#668BB2 ;
width:60px;
}
.menu_StaticSelectedStyle{
}
.menu_DynamicMenuStyle{
font-size:15px;
border-right: #B1B266 thin solid;
border-top: #B1B266 thin solid;
border-left: #B1B266 thin solid;
border-bottom: #B1B266 thin solid ;
z-index: 100;
width:100px;
}
.menu_DynamicMenuItemStyle{
width:200px;
/*HorizontalPadding="5px" VerticalPadding="2px"*/
}
.menu_DynamicSelectedStyle{
}
.menu_DynamicHoverStyle{
color:#FFFFFF;
background-color:#B1B266 ;
width:100px;
}

沒有留言:

張貼留言