Advanced Sitefinity Navigation Template

HorizontalWithDropdownMenus.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" %>

<sf:ResourceLinks runat="server" UseEmbeddedThemes="true" Theme="Basic">
      <sf:ResourceFile JavaScriptLibrary="JQuery" />
    <sf:ResourceFile JavaScriptLibrary="KendoWeb" />
    <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:ResourceLinks>  
  
<navigation:SitefinitySiteMapDataSource runat="server" ID="dataSource" />

<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">
        <navigation:NavigationContainer runat="server" DataSourceID="dataSource">
            <Templates>
                <navigation:NavigationTemplate runat="server" Level="0">
                    <Template>
                        <li class="<%# (bool)Eval("HasChildNodes") ? "has-drop" : null %>" >
                            <a runat="server" href='<%# Eval("Url") %>' target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'>
                                <%# Eval("Title") %>
                            </a>
                            <ul <%# (Eval("BackgroundImage") as Telerik.Sitefinity.Libraries.Model.Image) != null ? "class=\"level-0 mega\" style=\"background-image: url(" +  Eval("BackgroundImage.MediaUrl") + ")\"" : null %>>
                              <asp:PlaceHolder runat="server" ID="childNodesContainer" />
                            </ul>
                        </li>
                    </Template>
                    <SelectedTemplate>
                        <li class="active <%# (bool)Eval("HasChildNodes") ? " has-drop" : null %>" >
                            <a runat="server" href='<%# Eval("Url") %>' target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'>
                                <%# Eval("Title") %>
                            </a>
                            <ul <%# (Eval("BackgroundImage") as Telerik.Sitefinity.Libraries.Model.Image) != null ? "class=\"level-0 mega\" style=\"background-image: url(" +  Eval("BackgroundImage.MediaUrl") + ")\"" : null %>>
                              <asp:PlaceHolder runat="server" ID="childNodesContainer" />
                            </ul>
                        </li>
                    </SelectedTemplate>
                </navigation:NavigationTemplate>
                <navigation:NavigationTemplate runat="server">
                    <Template>
                        <li>
                            <a runat="server" href='<%# Eval("Url") %>' target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'>
                              <%# Eval("Title") %>
                                <%# String.IsNullOrEmpty(Eval("AdditionalText").ToString()) ? "" : "<span class=\"sub\">" + Eval("AdditionalText") + "</span>" %>
                              </a>
                            <ul runat="server" id="childNodesContainer"></ul>
                        </li>
                    </Template>
                    <SelectedTemplate>
                        <li>
                            <a runat="server" href='<%# Eval("Url") %>' class="sfSel" target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'><%# Eval("Title") %>
                            <%# String.IsNullOrEmpty(Eval("AdditionalText").ToString()) ? "" : "<span class=\"sub\">" + Eval("AdditionalText") + "</span>" %></a>
                              <ul runat="server" id="childNodesContainer"></ul>
                        </li>
                    </SelectedTemplate>
                </navigation:NavigationTemplate>
            </Templates>
        </navigation:NavigationContainer>
    </ul>
</div>

<%-- link to Kendo documentation http://demos.kendoui.com/web/menu/index.html --%>
<script type="text/javascript">
    (function ($) {
        var whetherToOpenOnClick = false;

        var kendoMenu = $('.sfNavHorizontalDropDown').not('.k-menu').kendoMenu({
            animation: { 
              	open: {
            		effects: "fadeIn",
            		duration: 100
                  }
		},
            openOnClick: whetherToOpenOnClick
        }).data('kendoMenu');

        if (whetherToOpenOnClick) {
            jQuery(kendoMenu.element).find("li:has(ul) > a").attr("href", "javascript:void(0)");
        }
    })(jQuery);
</script>