Styling Asp.Net Menu control with CSS – Example

Reff: http://jobinjohn.blogspot.com/2011/06/styling-aspnet-menu-control-with-css.html

here is an example to styling asp.net menu control by using a simple css and a background image. Hope it will help you

To create this stylish menu follow the following steps.

1. Create Menu.css file and type the following css code.


.Menu
{  

}

.Menu ul
{  
    background:#7795BD;
}

.Menu ul li
{
    background:#7795BD url(menu_bg.gif) repeat-x;
    text-align:center;
    /* set width if needed.*/
    width:200px;
}

.Menu ul li a
{
    color: black;
    padding: 4px 2px 4px;
    padding-left:8px !important;
    border:1px solid #648ABD;
    border-bottom: 0;
}

.Menu ul li a:hover
{
    background-image: none;
}

.Menu ul li a:hover
{
    color: White;
}

.Menu ul li a
{
    color: Black;
}

2. add the following image into the web application.

3. place menu control and set the CssClass property as given below

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="Menu">

        <Items>
            <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="#" Text="New Item New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                    <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                </asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
            </asp:MenuItem>
        </Items>

    </asp:Menu>

More about menu control:

Using CSS and Styles with the Menu Control

Download Project

 
About these ads

3 comments on “Styling Asp.Net Menu control with CSS – Example

  1. Hii,
    This is good. But problem is Menu expanding during page load, When page is loading for 5-8 second then menu is expanding.

  2. I m using vs2010, I know its working perfectly. but only issues is expanding during page load. please give any solution. I have tried lot of time to resolve it by googling. but couldn’t get result.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s