Monday, June 20, 2011

Styling Asp.Net Menu control with CSS - Example

Hello friends, 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>

13 comments:

vijay said...

Your css code is not working for me

Marc said...

Great post... It works for me. could you please share some more background images?

Jobin John said...

Vijay, I hope the menu control is rendering as table for you. To change it please set the "RenderingMode" to "List".

Rajesh said...

Excellent Article, It is really helpful
We can also remove the menu's right Black Arrow by adding StaticEnableDefaultPopOutImage="false" to the menu

romelk said...

having problems in IE. Menu drop down disappearing behind content! is there a IE fix? or how do i fix it?

Anonymous said...

Worked perfectly. This is the best just straightforward example that I have seen and finally got me where I wanted to be with asp.net menus. thanks for posting it.

mansoor.live said...

Hi, i am using VB.net 2005, needs to know from where i can set the render mode

My Menu is rendering in Table Mode.

But I Want It into UL LI Mode.

Help would be appreciated.

Thanks.
Best Regards

Mansoor Ahmed

Graphics & Web Developer

Mobile #: 0583190059

http://creativeworks.com.pk

http://gurumile.blogspot.com

Anonymous said...

Hi,

I am not able to set background image as there is some problem in path in my .css file.

Image is located in Code\Lime\images\menu_bg.gif

DJ said...

May be u have to use

background:#7795BD url(../Code/Lime/images/menu_bg.gif) repeat-x;


Regards,
DJ

Priya said...

I want to use a different image for the drop down list like a different color. I am trying to use the below and it is giving a lot of issues. Is there a work around for this:

Priya said...

Cont--

I am using this and having lot of issues:

Harish said...

Its really very good to understand the how to apply the CSS for Menu also....

Imran Babar said...

A very nice example. It is working very fine for me. Thank you very much for your help.

Imran