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

Forums / Project Feather / On Hover Dropdown Navigation with functioning parent link v9.0

On Hover Dropdown Navigation with functioning parent link v9.0

3 posts, 0 answered
  1. Scott
    Scott avatar
    4 posts
    Registered:
    09 Jul 2015
    19 May
    Link to this post

    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');
                }
            });

        }

     

     

  2. Scott
    Scott avatar
    4 posts
    Registered:
    09 Jul 2015
    20 May
    Link to this post

    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.

  3. Velizar Bishurov
    Velizar Bishurov avatar
    143 posts
    Registered:
    01 Dec 2016
    24 May
    Link to this post
    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
     
3 posts, 0 answered