+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Navigation Dropdown not working in IE

Navigation Dropdown not working in IE

2 posts, 0 answered
  1. Ben
    Ben avatar
    2 posts
    Registered:
    01 Apr 2014
    04 Dec 2014
    Link to this post

    The navigation bar "Horizontal with dropdown menus" template works in Chrome but not IE. I can still click on it in IE but the dropdown doesn't come down when I hover over it in IE. It works perfectly in Chrome. Here is the code. Thank you for any assistance!

    <%@ 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 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>

    <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>
                        <Template>
                            <li>
                                <a runat="server" href='<%# Eval("Url") %>' target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'><%# Eval("Title") %></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") %></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: false,
                openOnClick: whetherToOpenOnClick
            }).data('kendoMenu');

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


  2. Junior Dominguez
    Junior Dominguez avatar
    115 posts
    Registered:
    02 Dec 2016
    09 Dec 2014
    Link to this post
    Hi Ben,

    I have recorded this short video for you showing how you can do it in Sitefinity.  Notice that by default the child items in the menu will appear when click, however setting the "whetherToOpenOnClick" to false in the Navigation widget template will show them  when OnMouseOver. This will also work for IE as shown here.

    Best
    Regards,
    Junior Dominguez
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
2 posts, 0 answered