jQuery Mega下拉菜单插件（dcMegaMenu）如何更改事件悬停以单击窗口调整大小

Question

jquery mega drop down menu plugin: ( http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/advanced-styling/ )

Hi Guys, I am working on a responsive website using jquery mega drop down menu plugin by http://www.designchemical.com .

On desktop, by default full width windows (above 980px width) I am using event: "hover" in the plugin option. But I need a solution on how to change to event: "click" when window size is below 980px width?

Hope to find a solutions here. Many thanks!

Answer 1

try this lines:

jQuery(document).ready(function($) {
   if($(window).width() < 980){
      jQuery('#mega-menu').dcMegaMenu({
         event: 'click'
    });
   }
 });

Or on window resize:

    jQuery(window).resize(function($) {
      if($(window).width() < 980){
        jQuery('#mega-menu').dcMegaMenu({
           event: 'click'
        });
       }
    });

Good luck!

Answer 2

$('#mega-menu-1').dcMegaMenu({
            rowItems: '3',
            speed: 600,
            effect: 'slide',
            event: 'click'
        });

event:'click' works only with horizontal mega menu.There is no option for click in vertical mega menu.

Answer 3

1) Create a function to init the megamenu, depending on width (for this case, if width is more than 966px, the megamenu will be initiated)

function init_megamenu() {
    var w = $(window).width();
    if (w >= 966) {
        $('#mega-menu-9').dcMegaMenu({
            rowItems: '3',
            speed: 'fast',
            effect: 'fade'
        });
    }
}

2) Call the init_megamenu() function on document ready and window resize

$(document).ready(function() {
    // desktop menu
    init_megamenu();
});

$(window).resize(function() {
    // desktop menu
    init_megamenu();
});