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:
Your css code is not working for me
Great post... It works for me. could you please share some more background images?
Vijay, I hope the menu control is rendering as table for you. To change it please set the "RenderingMode" to "List".
Excellent Article, It is really helpful
We can also remove the menu's right Black Arrow by adding StaticEnableDefaultPopOutImage="false" to the menu
having problems in IE. Menu drop down disappearing behind content! is there a IE fix? or how do i fix it?
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.
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
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
May be u have to use
background:#7795BD url(../Code/Lime/images/menu_bg.gif) repeat-x;
Regards,
DJ
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:
Cont--
I am using this and having lot of issues:
Its really very good to understand the how to apply the CSS for Menu also....
A very nice example. It is working very fine for me. Thank you very much for your help.
Imran
Post a Comment