XF 2.1 Expand navigation menus on hover

[bzcomputers]

Was trying to reuse some code which allows navigation menus to expand on hover (no need to click to view sub-menu).

The code in it's current form doesn't work on XenForo 2.1, I think I'm just missing something basic. Figured someone here would see it quicker than me.

<script>
jQuery(".p-navE1").hover(
  function () {
    jQuery(this).find( '.menu-content' ).show();
  },
  function () {
    jQuery(this).find( '.menu-content' ).hide();
  }
);
</script>

 

[johndaroza]

I use this temp

<xf:js>
$( ".p-nav-list>li>.p-navEl").hover(function() {
    // nav
    if ($(this).attr('data-has-children') && $(this).not('.is-menuOpen')){
        // has children
        $(this).find( ".p-navEl-splitTrigger[aria-expanded='false']:not(.is-menuOpen)" ).trigger( "click" );
        $(this).find( ".p-navEl-linkHolder[aria-expanded='false']:not(.is-menuOpen)" ).trigger( "click" );
    }
});
</xf:js>

 

[bzcomputers]

Thanks, works great.

Just one thing it doesn't do. I would also like to have the menu close on "mouseout". If anyone knows how to add that it would be appreciated.

 

[Abraham54]

I have done what I found here:

XF 2.1 - How to make navigation dropdown on hover

I have one site which has a combination of Wordpress and XenForo. I am trying to style so the main navigation is the same for both, but one issue is that although the WP submenus dropdown on hover, the Xenforo ones don't. (I believe this is new since v2) Some members are bit confused by this...

xenforo.com

Works exactly as in WordPress!

 

[johndaroza]

Would be good if someone optimized it

$( ".p-nav-list>li" ).hover(function() {
    that = $(this).find('.p-navEl');
    if (that.attr('data-has-children') && that.not('.is-menuOpen')){
        // has children
        that.find( ".p-navEl-splitTrigger[aria-expanded='false']:not(.is-menuOpen)" ).trigger( "click" );
        that.find( ".p-navEl-linkHolder[aria-expanded='false']:not(.is-menuOpen)" ).trigger( "click" );
    }
    $( ".menu.is-active").mouseleave(function() {
        $( ".menuOutsideClicker").trigger( "click" );
        $( this).mouseleave(function() {
            $( ".menuOutsideClicker").trigger( "click" );
        });
    });
});