Menu CSS adapter and SqlSitemapProvider RRS feed

  • Question

  • User-562294917 posted

    I'm trying to use the CSS adapters, especially the Menu. I've downloaded it fra Codeplex. According to info, I only had to put a DLL in my bin folder. Copying all javascript and CSS files wasn't mentioned. The menu is generated via SqlSitemapProvider. My sitemap info is stored in a database and when I run my site, the html is generated ok.

    But I would like to change the CSS for the menu adapter, but since I'm using the version from Codeplex, I do not have any CSS files at hand. It looks as if they're "generated" on the fly.

    How can I change the CSS for my menu?


    Wednesday, February 6, 2008 8:00 PM

All replies

  • User1567340215 posted

    I know it's bad form to answer a question with a question but,

    If I'm understanding what you're asking correctly, wouldn't you just need to know what the CSS classes are that hold the menu modifications, then add them to your stylesheet?


    Wednesday, February 6, 2008 10:12 PM
  • User-562294917 posted

    Yes you're right! But I haven't figured how. I have this, which works ok.

    <asp:menu id="Menu" runat="server" datasourceid="SiteMapDataSource" cssselectorclass="PrettyMenu" orientation="Horizontal" />
    <asp:SiteMapDataSource ID="SiteMapDataSource" runat="server" SiteMapProvider="AspNetSqlSiteMapProvider" />

    The data is fetched through SiteMap provider correctly and I do get a menu, but not styled in any way.

    View source on the page and the menu looks like this:

    <div class="PrettyMenu" id="ctl00_Menu_Menu">
     <div class="AspNet-Menu-Horizontal">
       <ul class="AspNet-Menu">
        <li class="AspNet-Menu-WithChildren">
         <a href="Default.aspx" mce_href="Default.aspx" class="AspNet-Menu-Link">
          <li class="AspNet-Menu-WithChildren">
           <span class="AspNet-Menu-NonLink">
            <li class="AspNet-Menu-Leaf">
             <a href="Summary.aspx?CategoryID=0" mce_href="Summary.aspx?CategoryID=0" class="AspNet-Menu-Link" title="News from greater Seattle">
            <li class="AspNet-Menu-Leaf">
             <a href="Summary.aspx?CategoryID=2" mce_href="Summary.aspx?CategoryID=2" class="AspNet-Menu-Link" title="News from around the world">
          <li class="AspNet-Menu-WithChildren">
           <span class="AspNet-Menu-NonLink">
            <li class="AspNet-Menu-Leaf">
             <a href="Summary.aspx?CategoryID=3" mce_href="Summary.aspx?CategoryID=3" class="AspNet-Menu-Link" title="What's happening in baseball">

    I have not linked to any CSS of my own yet, because I can't find any info about doing it, in the Codeplex version, the DLL version. Am I to link my own CSS stylesheet in the top with a new CssSelectorClass, substituting PrettyMenu with, lets say NavBar? But then how about these lines, which seems to be loaded on the fly into my code:

    <script src="/MidtFor/WebResource.axd?d=kgT7KuoLW-pXRxx2l8mcFuarR9PzScsMiFAuBrqHizkLEMDL9xuk_SiGYHjR7GdSFtr1Gm8T8iQnhuen8Q6SbQ2&amp;t=633378210288437500" type="text/javascript"></script>
    <script src="/MidtFor/WebResource.axd?d=kgT7KuoLW-pXRxx2l8mcFuarR9PzScsMiFAuBrqHizl0clOAIHxg6_y4MoQeJkW-6zs5jHmY4pCDgFnSO3FcPA2&amp;t=633378210288437500" type="text/javascript"></script><link href="/MidtFor/WebResource.axd?d=kgT7KuoLW-pXRxx2l8mcFhbb06idcRDopGEkRwY-dH9QO5nrHy5DY5ndp3EThPZf0&t=633378210288437500" type="text/css" rel="stylesheet"></link><link href="/MidtFor/WebResource.axd?d=kgT7KuoLW-pXRxx2l8mcFgGsIHlIO7nZQTSDB1YhjX_1PHAXKusvkis2UOPjd9S67bI_bohRNnO8SxwqIntn5g2&t=633378210288437500" type="text/css" rel="stylesheet"></link>

    Before I used the CSSFriendlyAdapter for the Menu, the following CSS style worked with <div> <ul> <li> structure:

    .navbar {white-space:nowrap /*IE hack*/; float:left; width:958px; border-left:solid 10px rgb(200,200,200); border-right:solid 10px rgb(200,200,200); background-color:rgb(225,225,225); font-family:"trebuchet ms",arial,sans-serif; font-size:130% !important /*Non-IE6*/; font-size:120% /*IE6*/;} /*Color navigation bar normal mode*/

    /* Main menu */

    .navbar ul {list-style-type:none;}

    .navbar ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; background-color:rgb(225,225,225);}

    .navbar ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:rgb(100,100,100); border-right:solid 0px rgb(215,215,215);}

    .navbar ul li ul {display:none; border:none;}

    /* Submenu (Non-IE6 hovering) */

    .navbar ul li:hover {position:relative;} /*Sylvain IE hack*/

    .navbar ul li:hover a {background-color:rgb(235,235,235); text-decoration:none;} /*Color main cells hovering mode*/

    .navbar ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:1000; top:3.0em; margin-top:0.1em; left:0; padding:0px 16px 0px 16px; border-top:solid 1px rgb(215,215,215);}

    .navbar ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-17px; padding:4px 16px 4px 16px; border-right:solid 1px rgb(215,215,215); border-left:solid 1px rgb(215,215,215); border-bottom: solid 1px rgb(215,215,215); background-color:rgb(235,235,235); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/

    .navbar ul li:hover ul li a:hover {background-color:rgb(225,225,225); text-decoration:none;} /*Color subcells hovering mode*/

    /* Submenu (IE6 hovering) */

    .navbar table {position:absolute; z-index:1000; top:0px; left:-1px; border-collapse:collapse;}

    .navbar ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(235,235,235); text-decoration:none;} /*Color main cells hovering mode*/

    .navbar ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:1000; top:3.1em; t\op:3.0em; left:0px; marg\in-top:0.1em; border-top:solid 1px rgb(215,215,215); }

    .navbar ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-right:solid 1px rgb(215,215,215); border-left:solid 1px rgb(215,215,215); border-bottom: solid 1px rgb(215,215,215); background-color:rgb(235,235,235); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/

    .navbar ul li a:hover ul li a:hover {background-color:rgb(225,225,225); text-decoration:none;} /*Color subcells hovering mode*/

    I understand if it looks a bit confusing. At this moment, I'm wondering whether I should get rid of the DLL version and copy the code from the menu adapter sample site instead and make the changes in the adapter rendering the code, so that the classes adheres to my own stylesheet.

    Thursday, February 7, 2008 4:21 PM
  • User1567340215 posted

    I'm thinking that by substituting the CssSelectorClass, the menu will ignore the stylesheet generated on the fly simply because the references are different.

    As for the actual elements and such for modification, here's one from the Wrox-published Professional ASP.NET 2.0 Design book by Jacob Sanford (note: This is for a horizontal menu, so some of the values would need to be changed for a vertical menu (.AspNet-Menu-Horizontal to .AspNet-Menu-Vertical, for one)):

    .surfer5menu .AspNet-Menu-Horizontal
        z-index: 300;
    .surfer5menu ul.AspNet-Menu /* Tier 1 */
        float: right;
    .surfer5menu ul.AspNet-Menu ul  /* Tier 2 */
        width: 9em;
        left: 0%;
        background: #eeeeee;
        z-index: 400;
    .surfer5menu ul.AspNet-Menu ul li  /* Tier 2 list items */
        width: 8.9em;
        border:1px solid #cccccc;
        float: left;
        clear: left;
        height: 100%;
    .surfer5menu ul.AspNet-Menu ul ul  /* Tier 3+ */
        top: -0.5em;
        left: 6em;
    .surfer5menu li /* all list items */
        font-size: x-small;
    .surfer5menu li:hover, /* list items being hovered over */
    .surfer5menu li.AspNet-Menu-Hover
        background: #477897;
    .surfer5menu a, /* all anchors and spans (nodes with no link) */
    .surfer5menu span
        color: #477897;
        padding: 4px 12px 4px 8px;
        background: transparent url(../images/arrowRight.gif) right center no-repeat;
    .surfer5menu li.AspNet-Menu-Leaf a, /* leaves */
    .surfer5menu li.AspNet-Menu-Leaf span
        background-image: none !important;
    .surfer5menu li:hover a, /* hovered text */
    .surfer5menu li:hover span,
    .surfer5menu li.AspNet-Menu-Hover a,
    .surfer5menu li.AspNet-Menu-Hover span,
    .surfer5menu li:hover li:hover a,
    .surfer5menu li:hover li:hover span,
    .surfer5menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .surfer5menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
    .surfer5menu li:hover li:hover li:hover a,
    .surfer5menu li:hover li:hover li:hover span,
    .surfer5menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .surfer5menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
        color: White;
        background: transparent url(../images/activeArrowRight.gif) right center no-repeat;
    .surfer5menu li:hover li a, /* the tier above this one is hovered */
    .surfer5menu li:hover li span,
    .surfer5menu li.AspNet-Menu-Hover li a,
    .surfer5menu li.AspNet-Menu-Hover li span,
    .surfer5menu li:hover li:hover li a,
    .surfer5menu li:hover li:hover li span,
    .surfer5menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
    .surfer5menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
        color: #477897;
        background: transparent url(../images/arrowRight.gif) right center no-repeat;


    Thursday, February 7, 2008 5:36 PM
  • User478895623 posted

    The CSS isn’t generated on the fly – the classes are applied to the menu on the fly. You need three CSS files – Menu.css, IEMenu6.css (latter in your BrowserSpecific folder) and another with your ‘PrettyMenu’ (or whatever you decided to call it) classes in it. Your page head section should contain something like:

    <link runat='server' rel='stylesheet' href='~/css/Import.css' type='text/css' id='AdaptersInvariantImportCSS' />
    <!--[if lt IE 7]>
        <link runat='server' rel='stylesheet' href='../css/BrowserSpecific/IEMenu6.css' type='text/css' id='IEMenu6CSS' />
    <link rel="stylesheet" type="text/css" href="../css/file_with_PrettyMenu_in_it.css" />
    It might be a good idea to have a look at this tutorial, which has an example stylesheet (it’s a bit dated but it might get you started).
    Thursday, February 7, 2008 5:57 PM
  • User478895623 posted

    I'll just add a caveat to that. I'm not using the dll, so perhaps that takes care of the additional files, but the link above gives you access to an example CSS file that you can copy and link to your page.

    Thursday, February 7, 2008 6:03 PM
  • User1567340215 posted

    I'm pretty sure the .dll has the compiled adapters and basic CSS structures that normally come with the source code VSI.  Other than that, adding the IE6 hacks into your CSS as you have above, Swegen, should take care of any compatibility issues you might encounter.

    Thursday, February 7, 2008 9:28 PM
  • User-614851559 posted

    I am trying to use the Menu CSS adapter from the White Paper found on the asp.net site with a very modified version of the Codeplex club starter kit. I am getting a little lost because the instructions on the white paper do not match what is on the sample download (eg., no themes on the download, etc.) - and I am just learning. However, my users are complaining because the asp.net menus do not work on different browser and I thought this would be a reasonable approach.

    So far, my problems are:

    Can't add the CssSelectorClass to the menu tag (error is  'System.Web.UI.WebControls.SiteMapDataSource' does not have a public property named 'CssSelectorClass'. On the menu properties in Visual Web Developer Express 2005, the CssSelectorClass choice is grayed out.

    Not sure if I have to change my web.config to include the javascript <add key="CSSFriendly ... (I added it, but it is not in the instructions for the white paper). Are there other things I need to do to make this work that are not in the white paper?

    The idea of 3 CSS files (IE6?) from the previous posting is news to me.

    Is there a place I can go to get acccurate, step-by-step instructions? 

    Thank  you - Deborah



    Friday, February 8, 2008 3:43 PM
  • User1567340215 posted

    Where exactly are you putting the "CssSelectorClass" tag?  If I'm reading your error correctly, it looks as though you're putting in your SiteMapDataSource; it should go in the menu control itself, i.e. <asp:Menu ID="Menu1" CssSelectorClass="ClassName" runat="server" />.

    Are you working with the Adapter .dll files, or do you have the VSI template installed in Visual Studio (or whatever flavor you're using)?  If your using the VSI template, I'm not exactly sure where the themes are initially; I actually just have a dummy CSS Friendly Adapters Tutorial project that I just go into the App_Themes folder and steal the stand CSS stylesheets from.

    As for a good set of instructions, I found Jacob Sanford's ASP.NET 2.0 Design book to have a great chapter on the adapters themselves, as well as a good chapter on how to integrate them into your site with the CSS.  I'm not sure if the text is anywhere online, but if you're up for it, I recommend the book highly.

    Friday, February 8, 2008 6:44 PM
  • User-614851559 posted

    I mis-stated the error message - "Validation (ASP.Net Attribute 'CssSelectorClass' is not a valid attribute of element 'Menu'. when I put it in the menu control.

    I am using the template that I downloaded from the white paper links and installed on Visual Studio Express 2005 and I did put everything where the white paper said (checked it many time). I can see that it is working well enough to create ul and li tags rather than table tags; however, I cannot style them because I cannot add the CssSelectorClass for "PrettyMenu." Is there something I need to add so CssSelectorClass (which from the white paper is an "expando" property (?)) will be accepted as an attribute of the Menu element?

    Is there an easier way to do this? I have a simple vertical, 4 level menu using a static XML site map as the data source. I am really just trying to find a way to make the standard asp.net menu work in multiple browsers (Mozilla, Safari).  After two days of struggling ... I seem to be lost.

    Thank you. 


    Friday, February 8, 2008 8:55 PM
  • User1567340215 posted

    It shouldn't be a problem, even with that validation error - at runtime, the adapter knows what to do.  Have you compiled it and gotten an exception?

    Friday, February 8, 2008 9:01 PM
  • User-614851559 posted

    Thank you - that worked!

    Is there a way to turn off the menu adapter on some pages? I have several multi-form tabbed pages (tabs from CSS, using asp.net menu control) that now do not render correctly with the menu adapter, but did render perfectly with the asp.net menu control. So, on some pages the menu adapter should be used from the master page, but on the tabbed multipage form, no menu adapter.

    Of course, I can always change the tabbed multi-forms into individual pages if there is no solution.



    Saturday, February 9, 2008 11:58 AM
  • User1567340215 posted

    They're have been a couple of work arounds for turning the adapters off on certain components, but the easiest I've found is putting "enabledAdapter="false" " in the menu control.  According to the MSDN and the white papers, this doesn't always work, but I have yet to find a situation where it doesn't.

    Saturday, February 9, 2008 3:09 PM