Menu
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?
820
A Sitemap is an easy task but the criteria was for a menu of the sitemap that will be visible and invisible depending on role. So, the concept is that, the menu will be enabling and disable depending on role. The truth to be told, I spent a couple of hours solving it, then in meantime, I was misguided by a fellow developer, hahah..
JQuery With ASP.NET. In this article you will come to know what is JQuery and how to use with selected ASP.NET controls. JQuery is a JavaScript library. It is helpful and make easy to handle HTML DOM (Document Object Model), Events and Animation and Ajax functionalities. JQuery reduce code compared to JavaScript.
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.
Side menu animation in jQuery. This is a multi-level side navigation pattern with hover and push. Hovering over the menu will reveal its lables and clicking the hamburger icon pins the menu open. Dependencies: font-awesome.css, jquery.js
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.
96
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
