Hover

[alimosavifard]

Hi , Can i have a menu hover (not click) action (open , close) ,

[chrisdivyak]

You can do it by changing the init() function parameters to 'mouseover' instead of 'click.'

function init() {
        $menuItems.on( 'mouseover', open );
        $listItems.on( 'click', function( event ) { event.stopPropagation(); } );
    }

[Maby]

Hi, is there a possibility to have some delay before the hover effect? I don't want to the menu hover appear by mistake

[chrisdivyak]

Yes, you can add a setTimeout function after the open function. Replace the function open(event){...} with the following:

function open( event ) {
    setTimeout(function(){
        if( current !== -1 ) {
            $listItems.eq( current ).removeClass( 'cbp-hropen' );
        }
        var $item = $( event.currentTarget ).parent( 'li' ),
            idx = $item.index();
        if( current === idx ) {
            $item.removeClass( 'cbp-hropen' );
            current = -1;
        }
        else {
            $item.addClass( 'cbp-hropen' );
            current = idx;
            $body.off( 'click' ).on( 'click', close );
        }
        return false;
    }, 500);
}

[Maby]

Works fine, thank you for your rapid answer ;)

[unatalandrea]

Hi, can I close menu on mouseleave or mouseout?

[chrisdivyak]

You should be able to do this by just adding to the init() function and appending a new variable for the nav. I tested it and it seems to work.

var $listItems = $( '#cbp-hrmenu > ul > li' ),
      $menuItems = $listItems.children( 'a' ),
      $body = $( 'body' ),
      $nav = $( 'nav' ),
      current = -1;

    function init() {
        $menuItems.on( 'mouseover', open );
        $nav.on('mouseleave', close);
        $listItems.on( 'click', function( event ) { event.stopPropagation(); } );
    }