Open menu on hover instead of click with jQuery

Question

I want to change the default Bootstrap navbar component to a drilldown navigation on mobile. Do do that, I've added some JavaScript code to change my menu.

Here's the code I'm using at the moment: https://codepen.io/cray_code/pen/dENeKM

It works fine but on desktop the menu opens after a click instead an hover event.

For the desktop viewport there is the following code:

$('.mega-menu-trigger').bind('click' ,function(e){

    e.preventDefault();
    var current = $(this).next('.mega-menu');
    $('.mega-menu-trigger').not(this).removeClass('active');
    $(this).toggleClass('active');
    $('.mega-menu').not(current).removeClass('open').addClass('closed');
    if( !current.hasClass('open') ){
        current.removeClass('closed').addClass('open');
    } else {
        current.removeClass('open').addClass('closed');
    }
});

I tried to change the code with mouseenter to this:

$('.mega-menu-trigger').bind(mouseenter: function(e){

But that doesn't work and I have the problem that the menu stays open after leaving the link. I guess I have to work with mouseleave but I couldn't figure out how.

Is there any way to change the menu from click to hover?

Can't you use css to do this?

csba
– csba

2020-06-26 09:52:16 +00:00
Commented Jun 26, 2020 at 9:52 — csba
– csba, Commented Jun 26, 2020 at 9:52
I tried that. But could figure out how.

Cray
– Cray

2020-06-26 09:52:52 +00:00
Commented Jun 26, 2020 at 9:52 — Cray
– Cray, Commented Jun 26, 2020 at 9:52

Dhruv Shah · Accepted Answer · 2020-06-26 10:21:52Z

2

The menu open close behavior on hover can be achieved using a combination of mouseenter and mouseleave events in the follwoing way.

// Klick Funktionen hinzufÃ¼gen
$('.mega-menu-trigger').bind('mouseenter mouseleave' ,function(e){

   e.preventDefault();
   var current = $(this).next('.mega-menu');
   $('.mega-menu-trigger').not(this).removeClass('active');
   $(this).toggleClass('active');
   $('.mega-menu').not(current).removeClass('open').addClass('closed');
   if( !current.hasClass('open') ){
      current.removeClass('closed').addClass('open');
   } else {
     current.removeClass('open').addClass('closed');
   }
})

edited Jun 26, 2020 at 10:21

answered Jun 26, 2020 at 9:53

Dhruv Shah

1,6711 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cray Over a year ago

Thanks, I don't see any logic for closing the menu in my code. Where do I have to add that?

spammik · Accepted Answer · 2020-06-26 09:58:08Z

2

Exactly as you said...you need to work with mouseenter and mouseleave...simply do this.

$('.mega-menu-trigger').bind('mouseenter mouseleave' ,function(e){

answered Jun 26, 2020 at 9:58

spammik

1638 bronze badges

Comments

csba · Accepted Answer · 2020-06-26 10:02:16Z

1

Css code that works with your code in codepen:

.menu-item.has-sub-menu:hover > .menu > .menu-item{
    margin-top: 0;
    margin-bottom: 1em;
    opacity: 1!important;
    -webkit-transition: opacity .3s .6s ease-in-out, margin .6s ease-in-out;
    transition: opacity .3s .6s ease-in-out, margin .6s ease-in-out;
}

answered Jun 26, 2020 at 10:02

csba

7408 silver badges22 bronze badges

Comments

Joey Jaison · Accepted Answer · 2020-06-26 10:34:49Z

1

Try Below code

$('.mega-menu-trigger').hover(function (e){

                e.preventDefault();
                var current = $(this).next('.mega-menu');
                $('.mega-menu-trigger').not(this).removeClass('active');
                $(this).toggleClass('active');
                $('.mega-menu').not(current).removeClass('open').addClass('closed');
                if( !current.hasClass('open') ){
                    current.removeClass('closed').addClass('open');
                } else {
                    current.removeClass('open').addClass('closed');
                }
            });

this will open menu on hover

here is fiddle link https://jsfiddle.net/w4vmyrpz/

answered Jun 26, 2020 at 10:34

Joey Jaison

656 bronze badges

Collectives™ on Stack Overflow

Open menu on hover instead of click with jQuery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related