Tips & Tricks

Re: Creating Curve effects in Menu Control of ASP.NET 2.0 using CSS

KhanJanab — Thu, 26 Mar 2009 10:48:18 GMT

sir,

what i do for this err

Configuration Error

Description: An error occurred during the processing of a configuration file required to service this request. Please review the specific error details below and modify your configuration file appropriately.

Parser Error Message: The provider 'XmlSiteMapProvider' specified for the defaultProvider does not exist in the providers collection.

Source Error:

Line 23:             Set explicit="true" to force declaration of all variables.
Line 24:         -->
Line 25: 		<siteMap defaultProvider="XmlSiteMapProvider" enabled="true">
Line 26: 			<providers>
Line 27: 				<clear/>

Source File: C:\Documents and Settings\Khan\My Documents\Visual Studio 2005\WebSites\WebSite1\web.config Line: 25

Version Information: Microsoft .NET Framework Version:2.0.50727.42; ASP.NET Version:2.0.50727.42

Re: Creating Curve effects in Menu Control of ASP.NET 2.0 using CSS

moredotnet — Wed, 18 Jul 2007 13:04:45 GMT

Since its working for you, you may check the relative path of the images again.

Cheers

Vishal Khanna

Re: Creating Curve effects in Menu Control of ASP.NET 2.0 using CSS

haim96 — Tue, 17 Jul 2007 19:53:32 GMT

hay!

i got it work,but the images not shown ... any idea?

thanks

Re: Creating Curve effects in Menu Control of ASP.NET 2.0 using CSS

moredotnet — Tue, 17 Jul 2007 12:36:20 GMT

Yes the color would be different for the selected tab.

I created this code for an intranet application, so I dont think I would be able to give a URL as a live example.

Cheers

Re: Creating Curve effects in Menu Control of ASP.NET 2.0 using CSS

haim96 — Tue, 17 Jul 2007 07:52:13 GMT

hey ! this looks great! just what i was looking for...
is there a live site where i can see this work?
are the colors change for the selected tab?

thanks,

haim

Re: Creating Curve effects in Menu Control of ASP.NET 2.0 using CSS

spnz — Mon, 19 Mar 2007 00:13:17 GMT

Thanks for the post!!

Is it possible to take this one step further and have a rounded corner on the right hand side to make it look like a tab?

Thanks

Shane

Re: Creating Curve effects in Menu Control of ASP.NET 2.0 using CSS

chetan.sarode — Mon, 29 Jan 2007 03:58:23 GMT

Really very Good...

Thnax for posting it..

Re: Creating Curve effects in Menu Control of ASP.NET 2.0 using CSS

soundchaser59 — Sun, 28 Jan 2007 01:21:16 GMT

Talk about thinking inside the box! That little graphic trick is like reverse psychology! I wasted hours trying to get the entire folder tab graphic look, but with your trick all I had to do was create the corner cut! And the text appears right beside it! Thanks! Works like a charm! - SC

Creating Curve effects in Menu Control of ASP.NET 2.0 using CSS

moredotnet — Fri, 12 Jan 2007 06:53:08 GMT

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>

<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" ?>

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

<title>Creating Curve Effects in Menu Control</title>

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 2^nd command is

0 0% (first 0 means 0 pixels from top, second 0% means percentage distance from left)

The 3^rd 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