Superfish intègre une méthode destroy (depuis la version 1.7.3 au moins… à vérifier pour des versions antérieures mais dans le cas contraire, mettre à jour son plug-in) qu’on peut appeler en fonction de la largeur du viewport. La navigation peut ensuite être re-stylée via CSS et les mediaqueries.
Avec enquire.js
|
1 2 3 4 5 6 7 8 9 10 11 12 |
enquire.register("screen and (max-width: 767px)", { match : function() { jQuery(document).ready(function(){ jQuery('ul.sf-menu').superfish('destroy'); }); }, unmatch : function() { jQuery(document).ready(function(){ jQuery('ul.sf-menu').superfish({ //options }); }); } }); |
Sans enquire.js
Source : http://stackoverflow.com/questions/6748301/disable-superfish-on-resize-event
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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'); } }); }); |