jQuery Menu and ASP.NET Sitemap

asp.net, jquery, superfish

Solution

I found this question while looking for the same answer... everyone says it's possible but no-one gives the actual solution! I seem to have it working now so thought I'd post my findings...

Things I needed:

Superfish which also includes a version of jQuery

CSS Friendly Control Adaptors download DLL and .browsers file (into /bin and /App_Browsers folders respectively)

ASP.NET SiteMap (a .sitemap XML file and `siteMap` provider entry in web.config)

My finished `Masterpage.master` has the following `head` tag:

<head runat="server">
    <script type="text/javascript" src="/script/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="/script/superfish.js"></script>
    <link href="~/css/superfish.css" type="text/css" rel="stylesheet" media="screen" runat="server" />
    <script type="text/javascript">

        $(document).ready(function() {
        $('ul.AspNet-Menu').superfish();
        }); 

</script>
</head>

Which is basically all the stuff needed for the jQuery Superfish menu to work. Inside the page (where the menu goes) looks like this (based on these instructions):

<asp:SiteMapDataSource ID="SiteMapDataSource" runat="server"
    ShowStartingNode="false" />
<asp:Menu ID="Menu1" runat="server" 
    DataSourceID="SiteMapDataSource"
    Orientation="Horizontal" CssClass="sf-menu">
</asp:Menu>

Based on the documentation, this seems like it SHOULD work - but it doesn't. The reason is that the `CssClass="sf-menu"` gets overwritten when the Menu is rendered and the `<ul>` tag gets a `class="AspNet-Menu"`. I thought the line `$('ul.AspNet-Menu').superfish();` would help, but it didn't.

ONE MORE THING

Although it is a hack (and please someone point me to the correct solution) I was able to get it working by opening the `superfish.css` file and search and replacing sf-menu with AspNet-Menu... and voila! the menu appeared. I thought there would be some configuration setting in the `asp:Menu` control where I could set the `<ul>` class but didn't find any hints via google.

Problem

Is it possible to use an ASP.NET web.sitemap with a jQuery Superfish menu? If not, are there any standards based browser agnostic plugins available that work with the web.sitemap file?

Original source