jQuery Menu and ASP.NET Sitemap

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?

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.

Yes, it is totally possible.

I have used it with the ASP:Menu control and jQuery 1.2.6 with the Superfish plugin. Note, you will need the ASP.NET 2.0 CSS Friendly Control Adapters.

ASP.NET generates the ASP:Menu control as a table layout. The CSS Friendly Control Adapter will make ASP.NET generate the ASP:Menu control as a UL/LI layout inside a div.

This will allow easy integration of the jQuery and Superfish plugin because the Superfish plugin relies on a UL/LI layout.

It looks like you need to generate a UL for Superfish. You should be able to do this with ASP.Net from your site map. I think the site map control will do something like this. If not, it should be pretty trivial to call the site map directly from C# and generate the DOM programmatically. You could build a user control to do this, or do it in the master page.

Check out this MSDN article on how to programmatically enumerate the nodes in your site map.

Remember to add css classes for NonLink elements. Superfish css elements don't acccont for them. And if you're like me and have root menu's that are not links, then it renders horribly. Just add AspNet-Menu-NonLink elements to the superfish.css file and it should render fine.

The SiteMapDataSource control should be able to bind to any hierarchical data bound control. I'm not familiar with superfish but I know there are plenty of jQueryish controls out there to do this.

I created a neat little sample project you can use at http://simplesitemenu.codeplex.com/

It is a composite control which generates a nested UL/LI listing from your sitemap.

Enjoy!

来源：https://stackoverflow.com/questions/103630/jquery-menu-and-asp-net-sitemap

标签

ASP.NET

jquery

superfish