我成功创建的数据驱动的asp.net菜单控件:
Issue in creating a data driven menu in asp.net
现在需要使用css设置样式,我已经应用了以下链接的css:http://www.codeproject.com/Tips/526004/Database-driven-dynamic-Menu-Control
它在IE 8中工作得很好但不知何故,我对它的外观并不满意,并希望有一个更具交互性的菜单。
所以,我要求设计师在css中引用一些链接或代码,以便为我的菜单设置样式。
(P.S。将被引用的代码属于初学者级别,因为我是asp.net开发中的新手,但具有CSS的基本知识)
下面是我的菜单在IE 8中的显示方式:
我菜单的CSS如下:
.MenuBar { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
.StaticMenuItem
{
background-color: #1999cf; -moz-border-radius: 1px;
-webkit-border-radius: 1px; font: 14pt calibri;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin: auto; vertical-align: middle; background-repeat: repeat-x;
height: 70px; text-align: center; color: white; padding: 5px;
}
.StaticMenuItemStyle { color: #ffffff; padding: 20px; }
.StaticHoverStyle { background-color: #b6e390; color: #5f5f5f; }
.StaticSelectedStyle { background-color: #ffe99f; color: #5f5f5f; }
.DynamicMenuItemStyle
{
background-color: #bdeafe; border-width: 1px; border-style: solid;
border-color: #000000; -moz-border-radius: 1px; -webkit-border-radius: 1px;
font: 13pt calibri; margin: auto;border-left: 0px solid #c1c1c1;
border-right: 0px solid #c1c1c1; border-top: 0px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1; border-spacing: 0px;
vertical-align: middle; background-repeat: repeat-x;
height: 50px; text-align: left; color: #5f5f5f; padding: 5px;
}
.DynamicHoverStyle { background-color: #eca74c; color: #ffffff; }
我的菜单控件的代码如下:
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Width="100%" MaximumDynamicDisplayLevels="10">
<StaticMenuStyle CssClass="StaticMenuItem" />
<StaticMenuItemStyle CssClass="StaticMenuItemStyle" />
<StaticHoverStyle CssClass="StaticHoverStyle" />
<StaticSelectedStyle CssClass="StaticSelectedStyle" />
<DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
<DynamicHoverStyle CssClass="DynamicHoverStyle" />
</asp:Menu>