Désactiver superfish sur l'événement de redimensionnement

Question

J'essaie de combiner le plugin Superfish jQuery avec l'extrait adapt.js de Nathan Smith, qui charge dynamiquement dans différents fichiers CSS en fonction de la largeur du navigateur. Je veux désactiver/remplacer/quelque chose le menu Superfish en mode mobile, parce que les listes déroulantes n'ont aucun sens ici. J'ai essayé de détecter le changement et de désactiver le menu, mais j'en ai besoin pour le réactiver lorsque la fenêtre est redimensionnée à nouveau.

Voici ce que j'ai:

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(); 
}); 

La raison était de changer l'ID de l'élément html sur resize (entre pagesize_0 et pagesize_1 - qui fonctionne) et à utiliser des sélecteurs de descendants en CSS pour désactiver le menu, mais ça ne marche pas. J'ai essayé de relancer sfMenu() sur resize (code non montré ci-dessus), mais il ne semble pas inspecter le DOM modifié, réaliser pagesize_1 n'existe plus, puis échouer gracieusement (ce qui je pense réaliserait l'effet que je suis après).

Des pensées? Idéalement, je voudrais détruire la fonction superfish sur redimensionner-vers-mobile, puis réinstallez-le lorsque l'écran est de nouveau grand.

Answer 1

J'ai joué avec la même chose, en passant du style de barre de navigation horizontale (fenêtre plus large que subnav) au style vertical déroulant (sous-navigation plus large que fenêtre) à simplement plain-ol-list (nav principal plus large que la fenêtre).

Je ne sais pas comment élégant, il est, mais dans le unbind final() et removeAttr ('style') désactivé les menus déroulants pour moi:

$(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 a une méthode 'détruire' (certainement dans le dernier 1.7 .3 version) que vous pouvez appeler en fonction de la taille de l'écran pour le désactiver, puis redéfinir la navigation à l'aide de requêtes de média CSS. Vous pouvez également appeler ensuite la méthode « init » de SuperFish lorsque vous vouliez activer à nouveau:

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'); 
     } 
    }); 
}); 

Cela devrait nous l'espérons expliquer ce que je parle :)

http://cdpn.io/jFBtw