Отключить суперфиш при изменении размера - PullRequest
Новая
       8

Отключить суперфиш при изменении размера

4 голосов
/ 19 июля 2011

Я пытаюсь объединить плагин Superfish jQuery с фрагментом кода Натана Смита adapt.js, который динамически загружается в разные CSS-файлы в зависимости от ширины браузера. Я хочу отключить / заменить / что-то в меню Superfish, когда в мобильном режиме, потому что выпадающие не имеют никакого смысла там. Я попытался обнаружить изменение и отключить меню, но мне нужно, чтобы оно снова активировалось, когда размер окна снова изменился.

Вот что у меня есть: 

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

Обоснованием было изменить идентификатор элемента html на resize (между pagesize_0 и pagesize_1 - что работает) и использовать селекторы потомков в CSS, чтобы отключить меню, но это не работает. Я попытался повторно запустить sfMenu() на resize (код не показан выше), но, похоже, он не проверяет измененный DOM, понимает, что pagesize_1 больше не существует, а затем изящно завершается (что, я думаю, могло бы достичь эффекта, который я '') м после).

Есть мысли? В идеале, я бы хотел отключить функцию superfish на resize-to-mobile, а затем восстановить ее, когда экран снова станет большим.

Ответы [ 2 ]

9 голосов
/ 26 июля 2013

SuperFish имеет метод 'destroy' (конечно, в последней версии 1.7.3), который вы можете вызвать в зависимости от размера экрана, чтобы отключить его, а затем изменить стиль навигации с помощью медиазапросов CSS.Затем вы также можете вызвать метод 'init' SuperFish, когда захотите включить его снова: 

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

Надеемся, это объяснит, о чем я говорю :)

http://cdpn.io/jFBtw

3 голосов
/ 15 сентября 2011

Я играл с той же вещью, переходя от горизонтального стиля навигационной панели (окно шире, чем subnav) к вертикальному стилю выпадающего меню (subnav шире, чем окно) к обычному списку (основной навигационный файл ширечем окно).

Не уверен, насколько это элегантно, но в конце концов unbind () и removeAttr ('style') отключили раскрывающиеся списки для меня: 

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