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

 

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

  1. Basically, if the CSSClass is found, NO CSS will be applied. If the class is not found, the default CSS is used. No CSS can be applied. THis menu is junk.

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

  3. 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.

  4. Pingback: Fix Asp.net Parser Error Could Not Load Type _default Windows XP, Vista, 7, 8 [Solved]

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