Mega Menu for Sitefinty

megaMenu.js

      $("#navigation .sfNavWrp > ul > li > ul").wrap("<div class='dropDown'></div>")
        $(".dropDown").append("<div class='subNav'></div>").append("<div class='navText'></div>");

        // Configure events for main menu list items
        $("#navigation .sfNavWrp > ul > li").each(function () {
            $(this).delayedAction({
            	delayedAction: function ($element) {
            		$("#navigation").find(".currentLi").removeClass("currentLi");
                    var $dd = $element.children(".dropDown");
                    var $otherDrops = $(".dropDown.drop");
                    if ($dd !== $otherDrops) {
                        $otherDrops.removeClass("drop");
                        $dd.addClass("drop");
                    }
                    $dd.css("width", $("header").width() + "px");
                    var $sn = $dd.children(".subNav");
                    $sn.html("");
                    var nt = $dd.children(".navText");
                    nt.html($element.data("navtext"));
                },
                canceledAction: function ($element) {
                    var $dd = $element.children(".dropDown");
                    $dd.removeClass("drop");
                },
                hoverTime: 300
            });
        });
        // Configure sub menu items
        $(".dropDown > ul > li").each(function () {
            var $this = $(this);
            if ($this.children("ul").length > 0) {
                $this.addClass("children");
            }
            $this.on("hover", function () {
                $this.siblings(".currentLi").removeClass("currentLi");
                $this.addClass("currentLi");
            });
            $this.delayedAction({
                delayedAction: function ($element) {
                    var $this = $element;
                    var $dd = $this.parent().parent(".dropDown");
                    var $sn = $dd.children(".subNav");
                    var $nt = $dd.children(".navText");

                    $nt.html("");
                    $nt.html($this.data("navtext"));
                    var c = $this.children("ul").clone().show();
                    $sn.html(c).show();
                    $sn.children().children("li").each(function () {
                        $(this).delayedAction({
                            delayedAction: function ($element) {
                                $nt.html($element.data("navtext"));
                            },
                            hoverTime: 300
                        });
                    });
                },
                hoverTime: 300
            });
        });

        $("#navigation .sfNavWrp > ul").show()
    }

WidgetTemplate.ascx

<%@ Control Language="C#" %>
<%@ Import Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.Extensions.LightNavigationControlTemplate" %>
<%@ Import Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" %>

<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="navigation" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" %>
<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" %>
<%@ Register Assembly="Tenet.Sitefinity" TagPrefix="custom" Namespace="Tenet.Sitefinity.Widgets.Overrides" %>
  
<sf:ResourceLinks id="resLinks" runat="server" UseEmbeddedThemes="true" Theme="Basic">
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.nav.widget.css" Static="true" />
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_common_min.css" Static="true" />
    <sf:ResourceFile JavaScriptLibrary="JQuery" />
    <sf:ResourceFile JavaScriptLibrary="KendoWeb" />
</sf:ResourceLinks>

<custom:CustomSiteMapDataSource runat="server" ID="dataSource" />
  
<sf:SitefinityLabel id="title" runat="server" WrapperTagName="div" HideIfNoText="true" HideIfNoTextMode="Server" />
<div class="sfNavWrp sfNavHorizontalDropDownWrp <%= this.GetCssClass() %>">
     <%-- responsive design section - renders templates for the responsive design --%>
    <navigation:NavTransformationTemplate runat="server" TransformationName="ToToggleMenu" TemplateName="ToggleMenu" />
    <navigation:NavTransformationTemplate runat="server" TransformationName="ToDropDown" TemplateName="Dropdown" />
     <%-- end of the responsive design section --%>

    <ul runat="server" id="navigationUl" class="sfNavHorizontalDropDown sfNavList">
         <custom:CustomNavigationContainer runat="server"  DataSourceID="dataSource" >
            <Templates>
                <navigation:NavigationTemplate>
                    <Template>
                      <li data-navtext='<%# HttpContext.Current.Server.HtmlEncode(Eval("NavigationText") != null ? Eval("NavigationText").ToString() : string.Empty)%>'>
                            <a runat="server" href='<%# NavigationUtilities.ResolveUrl(Container.DataItem) %>' target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'><%# Eval("Title") %></a>
                            <ul runat="server" id="childNodesContainer"></ul>
                        </li>
                    </Template>
                    <SelectedTemplate>
                        <li data-navtext='<%# HttpContext.Current.Server.HtmlEncode(Eval("NavigationText") != null ? Eval("NavigationText").ToString() : string.Empty)%>'>
                            <a runat="server" href='<%# NavigationUtilities.ResolveUrl(Container.DataItem) %>' class="sfSel" target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'><%# Eval("Title") %></a>
                            <ul runat="server" id="childNodesContainer"></ul>
                        </li>
                    </SelectedTemplate>
                </navigation:NavigationTemplate>
            </Templates>
        </custom:CustomNavigationContainer >
    </ul>
</div>