Thursday, October 07, 2010

How to apply styles to menu items (Asp.net 3.5 Menu)

Demo:

With Basic Styles:

<%@ Page Language="C#" %>
<html>
<head id="Head1" runat="server">
    <style> 
        .StaticItem { background:#eeeborder:solid 1px #0f0margin:1px; }
        .DynamicItem { background-color:#eeeborder:solid 1px #00fmargin:1pxz-index:100; }
        .DynamicHighlight { background-color:Aquaborder:solid 1px #f00; }
        .StaticHighlight { background-color:Yellowborder:solid 1px #f00; }
        .DyanamicSelected { background-color:Limecolor:#fff; }        
        .StaticSelected { background-color:Fuchsiacolor:#fff; } 
    </style>
    <script runat="server">
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            if (!this.IsPostBack)
                for (int i = 0; i < 5; i++)
                {
                    MenuItem item = new MenuItem("Item" + i);
                    for (int j = 0; j < 5; j++)
                    {
                        MenuItem child = new MenuItem("Child" + j);
                        for (int k = 0; k < 5; k++)
                        {
                            MenuItem grandChild = new MenuItem("Grand Child" + k);
                            child.ChildItems.Add(grandChild);
                        }
                        item.ChildItems.Add(child);
                    }
                    this.mnuNavigation.Items.Add(item);
                }
        }
    </script>
</head>
<body>
    <form runat="server" id="form1">
        <asp:Menu runat="server" ID="mnuNavigation" CssClass="menu">
            <DynamicMenuItemStyle CssClass="DynamicItem" />
            <StaticMenuItemStyle CssClass="StaticItem" />
            <DynamicHoverStyle CssClass="DynamicHighlight" />
            <StaticHoverStyle CssClass="StaticHighlight" />
            <DynamicSelectedStyle CssClass="DyanamicSelected" />
            <StaticSelectedStyle CssClass="StaticSelected" />
        </asp:Menu>
    </form>
</body>
</html>

With image background.
Styles:
.StaticItem { background-image:url('Images/StaticItem.gif')border:solid 1px #0f0margin:1px; }
.DynamicItem { background-image:url('Images/DynamicItem.gif')border:solid 1px #00fmargin:1pxz-index:100; }
.DynamicHighlight { background-image:url('Images/DynamicHighlight.gif')border:solid 1px #f00; }
.StaticHighlight { background-image:url('Images/StaticHighlight.gif')border:solid 1px #f00; }
.DyanamicSelected { background-image:url('Images/DyanamicSelected.gif')color:#fff; }        
.StaticSelected { background-image:url('Images/StaticSelected.gif')color:#fff; } 

No comments:

iPhone Launch Screen Sizes

iPhone Portrait iOS 8 Retina HT 5.5 = 1242 X 2208 Retna HD 4.7 = 750 X 1134 iPhone Landscape iOS 8 Retina HD 5.5  2208 X 1242 iPho...