在asp.net中设置数据驱动器菜单控件的样式

时间:2013-03-08 07:27:33

标签: c# asp.net css visual-studio-2008 aspmenu-control

我成功创建的数据驱动的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中的显示方式:

enter image description here

我菜单的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>

0 个答案:

没有答案