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

  • Question

  • User-46028669 posted

    <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p> </o:p>

    Creating Curve effects in Menu Control of ASP.NET 2.0 using CSS<o:p></o:p>

    <o:p> </o:p>

    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.<o:p></o:p>

    <o:p> </o:p>

    First lets create the Menu Control. For this, write the following code in  .master page where you usually use menu controls.<o:p></o:p>

    <o:p> </o:p>

    <asp:Menu id="menu_mysite" <o:p></o:p>

    runat="server" Orientation="Horizontal" <o:p></o:p>

    Width="100%" Height="100%" <o:p></o:p>

    BackColor="#FF6600" Font-Names="Arial" <o:p></o:p>

    Font-Bold="true" Font-Size="Small" <o:p></o:p>

    DataSourceID="menu_SiteMapDataSource"  <o:p></o:p>

    StaticDisplayLevels="2" StaticSubMenuIndent="0"                                      <o:p></o:p>

                         <o:p></o:p>

    DynamicMenuItemStyle-BackColor="#FF6600" <o:p></o:p>

    DynamicMenuItemStyle-BorderColor="#CCCCCC"<o:p></o:p>

    DynamicMenuItemStyle-BorderWidth="1px" <o:p></o:p>

    DynamicMenuItemStyle-CssClass="MenuItemStyle" <o:p></o:p>

    DynamicHoverStyle-BackColor="#F5B800" <o:p></o:p>

    DynamicHoverStyle-Font-Bold="true" > <o:p></o:p>

    <o:p> </o:p>

    <staticmenuitemstyle bordercolor="#FFFFFF" <o:p></o:p>

    borderwidth="1px" CssClass="StaticMenuItem"<o:p></o:p>

    ItemSpacing="0px" HorizontalPadding="0px"   /><o:p></o:p>

    <staticselectedstyle backcolor="#A3A3A3"  <o:p></o:p>

    CssClass="selected"/><o:p></o:p>

    <statichoverstyle backcolor="#F5B800" <o:p></o:p>

    bordercolor="#FFFFFF"      font-bold="True" <o:p></o:p>

    CssClass="hover" />                                                <o:p></o:p>

                                                           <o:p></o:p>

    </asp:Menu><o:p></o:p>

    <asp:SiteMapDataSource ID="menu_SiteMapDataSource" <o:p></o:p>

    runat="server" SiteMapProvider="myMenuSiteMap" /><o:p></o:p>

    <o:p> </o:p>

    We need to register this sitemapprovider in our web.config, so add this piece of code out there too…<o:p></o:p>

    <o:p> </o:p>

    <system.web><o:p></o:p>

      <siteMap defaultProvider="XmlSiteMapProvider" enabled="true"><o:p></o:p>

          <providers><o:p></o:p>

            <clear />        <o:p></o:p>

            <add<o:p></o:p>

             name="myMenuSiteMap"<o:p></o:p>

             description="Menu SiteMap provider"<o:p></o:p>

             type="System.Web.XmlSiteMapProvider"<o:p></o:p>

             siteMapFile="~/mysite.sitemap" /><o:p></o:p>

          </providers><o:p></o:p>

        </siteMap><o:p></o:p>

    </system.web>                                                     <o:p></o:p>

    <o:p> </o:p>

    <o:p> </o:p>

    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…<o:p></o:p>

    <o:p> </o:p>

    <?xml version="1.0" encoding="utf-8" ?><o:p></o:p>

    <!-- SITEMAP FILE FOR MENU CONTROL--><o:p></o:p>

    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ><o:p></o:p>

      <siteMapNode url="~/myfolder/home.aspx" title="Home"  description=""><o:p></o:p>

    <siteMapNode url="~/myfolder/services.aspx" title="Services"   description="" />      <o:p></o:p>

    <siteMapNode url="~/myfolder/products" title="Products"  description="" /><o:p></o:p>

    <siteMapNode url="~/myfolder /aboutus.aspx" title="About Us"  description="" />   <siteMapNode url="~/myfolder/contactus.aspx" title="Contact Us"  description="" /><o:p></o:p>

                                                                          <o:p></o:p>

    </siteMapNode><o:p></o:p>

    </siteMap><o:p></o:p>

    <o:p> </o:p>

    Note that there are 2 levels out of data out here, and hence we have the property StaticDisplayLevels="2" for the menu control.<o:p></o:p>

    <o:p> </o:p>

    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.<o:p></o:p>

    <o:p> </o:p>

    <head runat="server"><o:p></o:p>

        <title>Creating Curve Effects in Menu Control</title><o:p></o:p>

        <o:p></o:p>

        <o:p></o:p>

        <style type="text/css"><o:p></o:p>

         a:link {color: #333399}<o:p></o:p>

         a:visited {color: #333399}<o:p></o:p>

         a:hover {color: #FF6600}<o:p></o:p>

         a:active {color: #0000FF} <o:p></o:p>

         <o:p></o:p>

        .StaticMenuItem<o:p></o:p>

        {<o:p></o:p>

           cursor:hand;<o:p></o:p>

           background: url("C:\\tlorange.gif") 0 0% no-repeat; <o:p></o:p>

           padding:10px;<o:p></o:p>

        }<o:p></o:p>

        a:link.StaticMenuItem, a:visited.StaticMenuItem, <o:p></o:p>

        a:hover.StaticMenuItem,a:active.StaticMenuItem,<o:p></o:p>

        a:link.MenuItemStyle, a:visited.MenuItemStyle, <o:p></o:p>

        a:hover.MenuItemStyle,a:active.MenuItemStyle<o:p></o:p>

        {<o:p></o:p>

         color: #000000; <o:p></o:p>

        } <o:p></o:p>

        .selected { <o:p></o:p>

        background: url("C:\\tlgrey.gif") 0 0% no-repeat; <o:p></o:p>

        }<o:p></o:p>

        .hover { <o:p></o:p>

        background: url("C:\\tlyellow.gif") 0 0% no-repeat; <o:p></o:p>

        }<o:p></o:p>

        .MenuItemStyle<o:p></o:p>

        {<o:p></o:p>

             text-align:center; <o:p></o:p>

             width:150px;       <o:p></o:p>

        } <o:p></o:p>

        <o:p></o:p>

      </style> <o:p></o:p>

    </head><o:p></o:p>

    <o:p> </o:p>

    Here are the images I’ve used…<o:p></o:p>

    <o:p>      </o:p>

    <o:p></o:p> 

    See the CSS properties I have used here that makes the curve-effects possible.<o:p></o:p>

    I have passed 3 commands to the background property. The first command is the URL of the small image. <o:p></o:p>

    The 2<SUP>nd</SUP> command is <o:p></o:p>

    0 0% (first 0 means 0 pixels from top, second 0% means percentage distance from left)<o:p></o:p>

    The 3<SUP>rd</SUP> command no-repeat makes it sure that the image appears just once.<o:p></o:p>

    That’s it!

     

    If you have any feedback, mail me @ moredotnet@gmail.com.

     

    Cheers

    Moredotnet

    Friday, January 12, 2007 1:53 AM

All replies

  • User68759119 posted
    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 [:)]
    Saturday, January 27, 2007 8:21 PM
  • User555306248 posted

    Really very Good...[:)]

    Thnax for posting it..

    Sunday, January 28, 2007 10:58 PM
  • User645394594 posted

    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

     

     

    Sunday, March 18, 2007 8:13 PM
  • User35770623 posted

    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

    Tuesday, July 17, 2007 3:52 AM
  • User-46028669 posted

    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

    VK

    Tuesday, July 17, 2007 8:36 AM
  • User35770623 posted

    hay!

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

     

    thanks

    Tuesday, July 17, 2007 3:53 PM
  • User-46028669 posted

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

    Cheers

    Vishal Khanna

    Wednesday, July 18, 2007 9:04 AM
  • User652879516 posted

    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 <!-- [ConfigurationErrorsException]: The provider 'XmlSiteMapProvider' specified for the defaultProvider does not exist in the providers collection. (C:\Documents and Settings\Khan\My Documents\Visual Studio 2005\WebSites\WebSite1\web.config line 25) at System.Web.Configuration.SiteMapSection.ValidateDefaultProvider() at System.Web.SiteMap.Initialize() at System.Web.SiteMap.get_Providers() at System.Web.UI.WebControls.SiteMapDataSource.get_Provider() at System.Web.UI.WebControls.SiteMapDataSource.GetHierarchicalView(String viewPath) at System.Web.UI.HierarchicalDataSourceControl.System.Web.UI.IHierarchicalDataSource.GetHierarchicalView(String viewPath) at System.Web.UI.WebControls.HierarchicalDataBoundControl.GetData(String viewPath) at System.Web.UI.WebControls.Menu.DataBindItem(MenuItem item) at System.Web.UI.WebControls.Menu.PerformDataBinding() at System.Web.UI.WebControls.HierarchicalDataBoundControl.PerformSelect() at System.Web.UI.WebControls.BaseDataBoundControl.DataBind() at System.Web.UI.WebControls.Menu.DataBind() at System.Web.UI.WebControls.BaseDataBoundControl.EnsureDataBound() at System.Web.UI.WebControls.Menu.EnsureDataBound() at System.Web.UI.WebControls.BaseDataBoundControl.OnPreRender(EventArgs e) at System.Web.UI.WebControls.Menu.OnPreRender(EventArgs e, Boolean registerScript) at System.Web.UI.WebControls.Menu.OnPreRender(EventArgs e) at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Control.PreRenderRecursiveInternal() at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) at System.Web.UI.Page.ProcessRequest(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) at System.Web.UI.Page.ProcessRequest() at System.Web.UI.Page.ProcessRequestWithNoAssert(HttpContext context) at System.Web.UI.Page.ProcessRequest(HttpContext context) at ASP.myfolder_home_aspx.ProcessRequest(HttpContext context) at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) -->

    Thursday, March 26, 2009 6:48 AM
  • User1734075858 posted

    @KhanJanab  - I know this might be late but here is the solution to the error that you are getting above. Change your web.Config setting for siteMap to this. and you should be good to go..

    <siteMap enabled="true">
          <providers>
           <add name="myMenuSiteMap" type="System.Web.XmlSiteMapProvider"  siteMapFile="mysite.sitemap" />
          </providers>
        </siteMap>

    Tuesday, June 15, 2010 2:39 PM
  • User1734075858 posted

    I followed the steps outlined in the post and my menu spacing is not working. So far almost everything is fine execpt the menu spacing and margin. Please see screenshot for details and I have also added my CSS file and .master page code. I'm using Aspe.nt 4.0.


    .Master File

    <div>
                    <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" />
                        <DynamicHoverStyle BackColor="#F5B800" Font-Bold="True"></DynamicHoverStyle>
                        <DynamicMenuItemStyle BackColor="#FF6600" BorderColor="#CCCCCC" BorderWidth="1px"
                            CssClass="MenuItemStyle"></DynamicMenuItemStyle>
                        <StaticHoverStyle BackColor="#F5B800" BorderColor="#FFFFFF" Font-Bold="True" CssClass="hover" />
                    </asp:Menu>
                    <asp:SiteMapDataSource ID="menu_SiteMapDataSource" runat="server" SiteMapProvider="myMenuSiteMap" />
                </div>


    .CSS file

    a:link
            {
                color: #333399;
            }
            
            a:visited
            {
                color: #333399;
            }
            
            a:hover
            {
                color: #FF6600;
            }
            
            a:active
            {
                color: #0000FF;
            }
                   
            
            .StaticMenuItem
            {
                cursor: hand;
                background: url("../images/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("../images/tlgrey.gif") 0 0% no-repeat;
            }
            
            .hover
            {
                background: url("../images/tlyellow.gif") 0 0% no-repeat;
            }
            
            .MenuItemStyle
            {
                text-align: center;
                width: 150px;
     
            }

    Wednesday, June 16, 2010 9:29 AM