On Hover Dropdown Navigation with functioning parent link v9.0 - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

On Hover Dropdown Navigation with functioning parent link v9.0

  • On Hover Dropdown Navigation with functioning parent link v9.0
  • I'm trying to make my horizontal navigation display the sub navigation on hover but still allow the parent navigation to link to it's respective page. I have some jquery that switches the onclick event into a hover event but the link is missing from the parent item.

     

    Any help would be appreciated.

    My script

    function sethoverevents()

            $('ul.nav li.dropdown').hover(function ()
                // you could also use this condition: $( window ).width() >= 768
                if ($('.navbar-toggle').css('display') === 'none'
                    && false === ('ontouchstart' in document))

                    $('.dropdown-toggle', this).trigger('click');
               
            , function ()
                if ($('.navbar-toggle').css('display') === 'none'
                    && false === ('ontouchstart' in document))

                    $('.dropdown-toggle', this).trigger('click');
               
            );

       

     

     

  • A solution I found is changing the root level rendering from :

    @*Here is specified the rendering for all child levels*@
    @helper RenderSubLevelsRecursive(NodeViewModel node)

        foreach (var childNode in node.ChildNodes)
       
            if(childNode.ChildNodes.Count > 0)
           
                 <li class="dropdown-submenu">
                    <a href="@childNode.Url" target="@childNode.LinkTarget">@childNode.Title
                        <span class="right-caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        @RenderSubLevelsRecursive(childNode)
                    </ul>
                </li>
           
            else
           
                <li class="@GetClass(childNode)">
                    <a href="@childNode.Url" target="@childNode.LinkTarget">@childNode.Title</a>
                </li>
           
       

    to

    @*Here is specified the rendering for all child levels*@
    @helper RenderSubLevelsRecursive(NodeViewModel node)

        foreach (var childNode in node.ChildNodes)
       
            if(childNode.ChildNodes.Count > 0)
           
                 <li class="dropdown-submenu">
                    <a href="@childNode.Url" target="@childNode.LinkTarget">@childNode.Title
                        <span class="right-caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        @RenderSubLevelsRecursive(childNode)
                    </ul>
                </li>
           
            else
           
                <li class="@GetClass(childNode)">
                    <a href="@childNode.Url" target="@childNode.LinkTarget">@childNode.Title</a>
                </li>
           
       

    Then wrote some javascript to handle the display of the submenu item.

  • Hello,

    It seems like you have been able to find a solution to your problem, however the code example you have provided in both cases is the same. Can you please share the updated code, that solves you problem, with the community?

    Regards,
    Velizar Bishurov
    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