1

ウィンドウが 800 ピクセル未満の幅でロードされたとき (またはサイズが変更されたとき) にドロップダウン メニューに変えたい、Superfish 対応の水平メニューがあります。ウィンドウのサイズが 800 ピクセルを超えると、ドロップダウンが水平リストに戻ります。

水平メニューは次のようになり、PHP 経由で出力されます (ここでは単純化されています)。

<ul id="menu-primary">
        <li id="menu-item-683">...</li>
        <li id="menu-item-10">
         <a class="sf-with-ul" href="about-us">About Us</a>
         <ul class="sub-menu"> </ul>
        </li>
        ...
</ul>

そこで、メニューを次のようにラップしてみました。

$("#menu-primary").wrap("<ul id='menu-dropdown' class='sf-menu sf-vertical'><li id='li_drop' class='menu-item'></li></ul>");
$("#menu-primary").before("<span id='nav-dropdown' class='sf-with-ul'>MENU</span>");

そして、ウィンドウサイズが小さい場合はラッパーでスーパーフィッシュを呼び出し、ウィンドウサイズが大きい場合はラッパーからスーパーフィッシュクラスを単純に削除します。

    function menudrop(){
if ( $(window).innerWidth() < 800) {
    $("#menu-dropdown").addClass("menu menu-dropdown superfish sf-js-enabled");
    $('#menu-dropdown').superfish({delay:100,animation:{height:'show'},dropShadows: false, speed: 1});
}

else {
    $("#menu-dropdown").removeClass("menu menu-dropdown superfish sf-js-enabled");
}
}

ほとんどの場合は機能しますが、ページを <800 ピクセルで読み込み、サイズを >800 に変更すると表示され#menu-primaryません。ラッパーを追加しなかった場合とまったく同じように CSS を作成しようとしましたが、うまくいきません。どうにか元に戻す必要があるようですが$('#menu-dropdown').superfish();、その方法がわかりません。

これは可能ですか、または (メニューをメニューに変換せずに) このアイデアを実現するより良い方法はあり<select><option>...ますか?

4

1 に答える 1

0

Superfish では jquery イベントがメニューにバインドされている必要があるため、html を正確に古いものに変更した場合でも、ドロップダウン効果が変わる可能性がありますが、それでもバグがあります。Superfish 効果は元に戻すことはできません (私が思うに) が、ドロップダウン メニューで同じ css に対して 2 つのスタイルを定義することができます。これら 2 つのスタイルはまったく同じである必要があります。スーパーフィッシュ効果を適用する前に、古いメニュー html を保存します。

var oldmenu = $('#menu-primary').html();
$('#menu-primary').superfish(....

次に、ブラウザのサイズ > 800 で古い html を貼り付けます。

$('#menu-primary').html(oldmenu);

そして、次のように（同じスタイルで）他のクラスを適用します。

$('#menu-primary').attr("id", "menu-primary2");

現在、このメニューではスーパーフィッシュ効果が機能せず、スタイルは同じです。

于 2013-03-01T17:00:03.287 に答える