将水平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菜单转换为小屏幕上的下拉菜单

回答

相关问题