Open submenu on hover instead of click

[nikolas]

How do I use bootstrap-submenu to open the submenu on hover? That's how bootstrap 2 did it: http://getbootstrap.com/2.3.2/components.html#dropdowns

[alvarotrigo]

+1

[artrz]

+1

[Rajiv-Kulkarni]

+1

[upupzealot]

+1 Any one find a solution?

[davidsellen]

+1

[top-kat]

+1

[top-kat]

Hi, my friends, I 've found a solution ! And don't forget that if you want to make link clickable, you have to remove data-toggle="dropdown" from html

Just replace the function from line 67 to env. 110 by this one

$.extend(SubmenuItem.prototype, Item.prototype, {
    init: function() {
      this.$element.on({
        click: $.proxy(this, 'click'), // you can disable former click event here
        keydown: $.proxy(this, 'keydown'),
    mouseover: $.proxy(this, 'mouseover') //support for mouseover
      });
      this.$main.on('hide.bs.submenu, mouseleave', $.proxy(this, 'hide')); // added mouseleave for menu to reset when mouse leaves
    },
    click: function(event) { // you can disable former click event here
      // Fix a[href="#"]. For community
      /*event.preventDefault();

  event.stopPropagation();

  this.toggle();*/
},
mouseover: function(event) { // added mouseover function
  this.open();
},
hide: function(event) {
  // Stop event bubbling
  event.stopPropagation();

  this.close();
},
open: function() {
  this.$main.addClass('open');
  this.$subs.trigger('hide.bs.submenu');
},
toggle: function() {
  if (this.$main.hasClass('open')) {
    this.close();
  }
  else {
    this.open();
  }
},
keydown: function(event) {
  // 13: Return, 32: Spacebar

  if (event.keyCode == 32) {
    // Off vertical scrolling
    event.preventDefault();
  }

  if ($.inArray(event.keyCode, [13, 32]) != -1) {
    this.toggle();
  }
}

  });

Also a big thanks to @vsn4ik for this very light and effective plug-in !

Hope this helps

[eduardelatorre]

+1

[Martchus]

+1

[macsplan]

Thanks @myrmecia done that, here's my gist of the change: https://gist.github.com/macsplan/39c29d44ff5fd0b18d6699087f0a1874

Still opening on hover, any ideas where i'm going wrong?

[Martchus]

This is the modification to show the menu on mouseover I created for openQA some time ago: https://github.com/Martchus/bootstrap-submenu/commit/28162577b23e33f8dcd43190086f0e17ac744be0

We decided to stick with the on-click-version after all, but I tested it and it worked.

[macsplan]

thanks @Martchus do you have the code for the click-only version?

[Martchus]

The version in this repository is the click-only version. At least release v2.0.4 which we use in openQA.

[macsplan]

thanks @Martchus, must have a problem in my app. will figure it out, thanks