javascript - que - Deshabilitar Superfish en el evento de cambio de tamaño

que hace e preventdefault();

Question

Intento combinar el plugin jQuery de Superfish con el fragmento adapt.js de Nathan Smith, que se carga dinámicamente en diferentes archivos CSS dependiendo del ancho del navegador. Quiero desactivar / reemplazar / algo del menú de Superfish cuando esté en modo móvil, porque los menús desplegables no tienen sentido allí. Intenté detectar el cambio y deshabilitar el menú, pero necesito que se vuelva a habilitar cuando la ventana vuelva a cambiar de tamaño.

Esto es lo que tengo:

function htmlId(i, width) {
    document.documentElement.id = ''pagesize_'' + i;
}

var ADAPT_CONFIG = {
  path: ''/css/'',
  dynamic: true,
  callback: htmlId,
  range: [
    ''0px    to 760px  = mobile.css'',
    ''760px  = 960_12.css''
  ]
};

function sfMenu() {
    $("#pagesize_1 ul.sf-menu").superfish({ 
        delay:       800,
        animation:   {opacity:''show''},
        speed:       ''fast'',
        autoArrows:  true,
        dropShadows: true
    }); 
}

$(document).ready(function(){
    sfMenu();
});

El motivo fue cambiar el id del elemento html en pagesize_0 (entre pagesize_0 y pagesize_1 - que funciona) y usar selectores descendientes en CSS para deshabilitar el menú, pero eso no funciona. Intenté volver a ejecutar sfMenu() al resize el resize (código no mostrado arriba), pero no parece inspeccionar el DOM modificado, darse cuenta de que pagesize_1 ya no existe, y luego fallar con elegancia (lo cual creo que lograría el efecto que estoy pagesize_1 ).

¿Alguna idea? Idealmente, me gustaría destruir la función superfish en resize-to-mobile, luego volver a instalarla cuando la pantalla vuelva a ser grande.

Answer 1

He estado jugando con lo mismo, pasando del estilo horizontal de la barra de navegación (ventana más ancha que subnav) al estilo vertical desplegable (subnav más ancho que la ventana) a simplemente plain-ol-list (navegación principal más ancha que la ventana) .

No estoy seguro de qué tan elegante es, pero al final unbind () y removeAttr (''estilo'') deshabilitó las listas desplegables para mí:

$(window).resize(function() {
    if ($(this).width() < maxNavigationWidth) {
        $(''#neck .navigation'').removeClass(''sf-menu'');
        $(''.navigation li'').unbind();
        $(''.navigation li ul'').removeAttr(''style'');
    } else {
        $(''#neck .navigation'').addClass(''sf-menu'').addClass(''sf-js-enabled'');
        applySuperfish();
    }
});

Answer 2

SuperFish tiene un método de ''destrucción'' (ciertamente en la última versión 1.7.3) al que se puede llamar dependiendo del tamaño de la pantalla para deshabilitarlo y luego rediseñar la navegación usando consultas de medios CSS. También podría llamar al método ''init'' de SuperFish cuando quisiera habilitarlo de nuevo:

var sf, body;
var breakpoint = 600;
jQuery(document).ready(function($) {
    body = $(''body'');
    sf = $(''ul.sf-menu'');
    if(body.width() >= breakpoint) {
      // enable superfish when the page first loads if we''re on desktop
      sf.superfish();
    }
    $(window).resize(function() {
        if(body.width() >= breakpoint && !sf.hasClass(''sf-js-enabled'')) {
            // you only want SuperFish to be re-enabled once (sf.hasClass)
            sf.superfish(''init'');
        } else if(body.width() < breakpoint) {
            // smaller screen, disable SuperFish
            sf.superfish(''destroy'');
        }
    });
});

Esto debería poder explicar de lo que estoy hablando :)

http://cdpn.io/jFBtw