ansaurus

Question

Answer 1

A:

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.

Smallinov 2008-09-19 17:13:54

Answer 2

+2 A:

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.

Jason Jackson 2008-10-04 22:08:19

Answer 3

+3 A:

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.

PhantomTypist 2008-10-04 22:26:33

Answer 4

+21 A:

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.

CraigD 2009-03-15 11:24:55

Fantastic! I've been searching for an answer since first asking this question.

Alison 2009-03-15 15:44:14

I've uploaded a sample project with all the required files herehttp://conceptdevelopment.net/Fun/Superfish

CraigD 2009-03-21 01:47:37

Regarding the CSS classes, you are correct that they aren't configurable. The class names are hard-coded in the CSSFriendly code. You could download the source, modify the classes, and rebuild the DLLs if you really wanted to, but I think your way is much simpler.

Jonathan S. 2009-07-02 19:13:19

This worked great - One problem I ran into was the dropdown arrow images from superfish were not appearing. That's because when you use the SiteMapDataSource control, a WebResource.axd gets added and it has a higher specificity than the superfish.css properties. I couldn't figure out how to stop the WebResource.axd file from being added, but what you can do is change .sf-sub-indicator in superfish.css to "ul.AspNet-Menu .sf-sub-indicator" and then add "height:10px !important" to the class. You should see the images now. Better solutions are welcome

mawaldne 2009-12-04 22:43:34

Answer 5

+1 A:

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.

2009-09-16 10:06:00

ansaurus

tags:

views:

answers:

jQuery Menu and ASP.NET Sitemap

related questions