javascript - que - Deshabilitar Superfish en el evento de cambio de tamaño
que hace e preventdefault(); (2)
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.
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();
}
});
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 :)