On Hover Dropdown Navigation with functioning parent link v9

Posted by Community Admin on 05-Aug-2018 14:03

On Hover Dropdown Navigation with functioning parent link v9.0

All Replies

Posted by Community Admin on 19-May-2016 00:00

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

   

 

 

Posted by Community Admin on 20-May-2016 00:00

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.

Posted by Community Admin on 24-May-2016 00:00
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
 
This thread is closed