4

Superfish jQuery プラグインを Nathan Smith の 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 要素の id をresize(pagesize_0とpagesize_1- の間で) 変更し、CSS で子孫セレクターを使用してメニューを無効にすることでしたが、それは機能しません。再実行を試みsfMenu()ましたがresize(コードは上記に示されていません)、変更された DOM を検査していないようで、pagesize_1もはや存在しないことに気付き、正常に失敗します (これにより、私が求めている効果が得られると思います)。

何かご意見は？理想的には、superfishモバイルへのサイズ変更で機能を破棄し、画面が再び大きくなったときに機能を元に戻したいと思います。

4

2 に答える 2

9

SuperFish には「destroy」メソッド (確かに最新の 1.7.3 バージョン) があり、画面サイズに応じて呼び出して無効にし、CSS メディア クエリを使用してナビゲーションのスタイルを変更できます。再度有効にしたい場合は、SuperFish の「init」メソッドを呼び出すこともできます。

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

于 2013-07-26T11:08:47.567 に答える
3

私は同じことをいじっており、水平ナビゲーションバースタイル（サブナビよりも広いウィンドウ）から垂直ドロップダウンスタイル（ウィンドウよりも広いサブナビ）、プレーンオールリスト（ウィンドウよりも広いメインナビゲーション）に移行しています。 .

それがどれほどエレガントかはわかりませんが、最終的に 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();
    }
});
于 2011-09-15T15:16:21.507 に答える