將水平Superfish菜單轉換爲小屏幕上的下拉菜單

我有一個啓用了Superfish的水平菜單，當窗口加載到或調整到小於800像素寬度時，我想將其變爲下拉菜單。如果窗口調整到800像素以上，我希望該下拉列表返回到水平列表。將水平Superfish菜單轉換爲小屏幕上的下拉菜單

水平菜單看起來像這樣，通過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>...菜單）？

來源

2012-04-29 sharcupine

Superfish必須有一個綁定到菜單的jquery事件，所以即使將html更改爲舊的，它可能會改變下拉效果，但它仍然會出現問題。 Superfish效果是不可逆的（我認爲），但是你可以在下拉菜單中爲同一個css定義兩種樣式，一種是你已經擁有的是＃menu-primary，另一種是＃menu-primary2（或者其他），這兩種風格應該完全一樣。應用快魚效應之前，保存舊菜單HTML：

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

然後在瀏覽器的大小> 800貼回舊的HTML：

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

並應用其他類（相同的樣式）這樣的：

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

現在快魚效應不會在此菜單上的工作和風格仍然是相同的。

來源

2013-03-01 17:00:03

將水平Superfish菜單轉換爲小屏幕上的下拉菜單

回答

相關問題