Creating Curve effects in Menu Control of ASP.NET 2.0 using CSS
See the menu control in the picture below. It’s a simple ASP.NET 2.0 Menu control being used. The entire tab is not an image. Only 3 tiny gif chunks have been used here which have been placed on the left top of each tab in the menu control. The curve effects have been achieved using some CSS powers.
Here is what I’ve done.
First lets create the Menu Control. For this, write the following code in .master page where you usually use menu controls.
<asp:Menu id="menu_mysite"
runat="server" Orientation="Horizontal"
Width="100%" Height="100%"
BackColor="#FF6600" Font-Names="Arial"
Font-Bold="true" Font-Size="Small"
DataSourceID="menu_SiteMapDataSource"
StaticDisplayLevels="2" StaticSubMenuIndent="0"
DynamicMenuItemStyle-BackColor="#FF6600"
DynamicMenuItemStyle-BorderColor="#CCCCCC"
DynamicMenuItemStyle-BorderWidth="1px"
DynamicMenuItemStyle-CssClass="MenuItemStyle"
DynamicHoverStyle-BackColor="#F5B800"
DynamicHoverStyle-Font-Bold="true" >
<staticmenuitemstyle bordercolor="#FFFFFF"
borderwidth="1px" CssClass="StaticMenuItem"
ItemSpacing="0px" HorizontalPadding="0px" />
<staticselectedstyle backcolor="#A3A3A3"
CssClass="selected"/>
<statichoverstyle backcolor="#F5B800"
bordercolor="#FFFFFF" font-bold="True"
CssClass="hover" />
</asp:Menu>
<asp:SiteMapDataSource ID="menu_SiteMapDataSource"
runat="server" SiteMapProvider="myMenuSiteMap" />
We need to register this sitemapprovider in our web.config, so add this piece of code out there too…
<system.web>
<siteMap defaultProvider="XmlSiteMapProvider" enabled="true">
<providers>
<clear />
<add
name="myMenuSiteMap"
description="Menu SiteMap provider"
type="System.Web.XmlSiteMapProvider"
siteMapFile="~/mysite.sitemap" />
</providers>
</siteMap>
</system.web>
As we see above, the data in the menu is saved in a file called mysite.sitemap located on the root folder itself. To create a sitemap, right click your project, add new item, select Site Map. Here is how the sitemap file looks like…
<?xml version="1.0" encoding="utf-8" ?>
<!-- SITEMAP FILE FOR MENU CONTROL-->
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/myfolder/home.aspx" title="Home" description="">
<siteMapNode url="~/myfolder/services.aspx" title="Services" description="" />
<siteMapNode url="~/myfolder/products" title="Products" description="" />
<siteMapNode url="~/myfolder /aboutus.aspx" title="About Us" description="" /> <siteMapNode url="~/myfolder/contactus.aspx" title="Contact Us" description="" />
</siteMapNode>
</siteMap>
Note that there are 2 levels out of data out here, and hence we have the property StaticDisplayLevels="2" for the menu control.
I’m adding the CSS properties in the same page itself rather than a separate CSS file. Add this code to the <head> tag of your master page.
<head runat="server">
<title>Creating Curve Effects in Menu Control</title>
<style type="text/css">
a:link {color: #333399}
a:visited {color: #333399}
a:hover {color: #FF6600}
a:active {color: #0000FF}
.StaticMenuItem
{
cursor:hand;
background: url("C:\\tlorange.gif") 0 0% no-repeat;
padding:10px;
}
a:link.StaticMenuItem, a:visited.StaticMenuItem,
a:hover.StaticMenuItem,a:active.StaticMenuItem,
a:link.MenuItemStyle, a:visited.MenuItemStyle,
a:hover.MenuItemStyle,a:active.MenuItemStyle
{
color: #000000;
}
.selected {
background: url("C:\\tlgrey.gif") 0 0% no-repeat;
}
.hover {
background: url("C:\\tlyellow.gif") 0 0% no-repeat;
}
.MenuItemStyle
{
text-align:center;
width:150px;
}
</style>
</head>
Here are the images I’ve used…
See the CSS properties I have used here that makes the curve-effects possible.
I have passed 3 commands to the background property. The first command is the URL of the small image.
The 2nd command is
0 0% (first 0 means 0 pixels from top, second 0% means percentage distance from left)
The 3rd command no-repeat makes it sure that the image appears just once.
That’s it!
If you have any feedback, mail me @ moredotnet@gmail.com.
Cheers
Moredotnet