标签: superfish

如何让superfish菜单向后打开？我在fanpage页面上将我的facebook应用程序嵌入了一个supperfish菜单,没有足够的空间让菜单完全展开,因为它在iframe中运行.如何通过使用superfis或任何其他jquery菜单插件解决此问题也很好.

谢谢.

目前的情况

预期的结果

@Updated:这是一个用户定义的菜单,它没有菜单级别的限制.

我在我正在使用的网站上使用jQuery Superfish插件.到目前为止工作正常.

问题是:我必须优化喜欢iPad移动设备的网站等,
我点击菜单项后,菜单不会关闭自己,只要我点击页面上的任何其他链接.

我已经尝试查看Superfish代码并将悬停事件更改为click事件但没有成功.

当涉及到jQuery时,我不是专业人士,所以如果有人能帮助我改变我需要改变的东西,我会很感激.

我正在尝试将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调整大小到移动设备的功能,然后在屏幕再次变大时重新启动它.

我有使用Superfish jquery插件制作的菜单http://users.tpg.com.au/j_birch/plugins/superfish

但我有一些问题,当我在Firefox,Chrome和IE中查看我的页面时添加了填充:

这里是jsfiddle示例http://jsfiddle.net/YsG97/2/ 可能有人可能会建议如何删除Superfish菜单ul和标题div之间的这个间距？

并且有一些奇怪的东西我猥亵地发现,如果我把菜单关闭标签后:</ul>&nbsp;它在Firefox中固定间距,不知道为什么.可能有些人可能解释一下？

我有一个奇怪的问题,jQuery superfish菜单插件在使用时一切正常,animation: {opacity: 'show'}并且应用于ul元素的内联样式是:

display: none; visibility: hidden;

我想用animation: {height: 'show'} ,但使用它的下拉菜单时,仅显示第1级的下拉菜单,因为快鱼是添加overflow: hidden;到ul应用元素和内联样式:

display: none; overflow: hidden; visibility: hidden;

所以问题是overflow: hidden;阻止嵌套的ul元素在悬停时显示,所以我尝试添加overflow: visible !important;哪个修复了问题,但菜单的行为是缓慢的,我不想要这个解决方案.

所以我发现* {box-sizing: border-box;}我的css文件内部正在发生这种行为,当删除时,superfish不会添加overflow: hidden;到ul元素.

我在codepen上创建了一个demo:http://codepen.io/anon/pen/Awqdn

发生了什么:

animation: {opacity: 'show'}即使我有,1- 工作正常* {box-sizing: border-box;}

2- animation: {height: 'show'}因为插件中添加到ul元素的溢出隐藏而无法工作,* {box-sizing: border-box;}从css文件中删除时会解决此问题.

那么我该如何解决这个问题呢？什么overflow: hidden;时候有超级鱼加水box-sixing: border-box;？

并提前感谢.

我试图jQuery在一个页面上使用2个导航脚本(Superfish用于桌面和FlexNav 移动设备).我目前正matchMedia与polyfillPaul Irish 一起使用来回应CSS3媒体查询状态的变化JavaScript.

目前的代码只实现了总体目标的50%.如果您最初访问网页的窗口大小等于或大于999px宽,那么您将获得Superfish并且如果您最初访问窗口大小小于999px的网页,那么您将获得FlexNav.当您将窗口调整大小或低于999px时,会发生此问题,因为两个脚本都变为活动状态.

// media query event handler
if (matchMedia) {
    var mq = window.matchMedia("(min-width: 999px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}
// media query change
function WidthChange(mq) {
    if (mq.matches) {
        $("ul.sf-menu").superfish({
            delay: 350,
            speed: 400,
        });
    } else {
        $("ul.flexnav").flexNav({
            'animationSpeed': '250',
            'transitionOpacity': true,
            'buttonSelector': '.menu-button',
            'hoverIntent': false
        });
    }
}

尽管我希望能够与之合作matchMedia,但我对所有建议持开放态度.

更新:感谢Stephan的建议,我现在有以下代码:

jQuery(document).ready(function () {
    // add destroy function …

我只在chrome for superfish下拉菜单中收到此错误.它在Firefox和IE中运行良好.它在Chrome中不起作用.菜单而不是水平列表本身垂直.客户实际网站的域名已在下面更改为保密

<script type="text/javascript" src="http://www.domainname.com/js/jquery.js"></script>
<script type="text/javascript" src="http://www.domainname.com/js/superfish.js"></script>
<script type="text/javascript" src="http://www.domainname.com/js/hoverIntent.js"></script>
<script type="text/javascript">
    // initialise plugins
jQuery(function(){
     jQuery('ul.sf-menu').superfish();
    });
</script>

我甚至将其更改为以下内容并且不起作用:

    <script type="text/javascript">
         $(document).ready(function(){
            $('ul.sf-menu').superfish();
         })
    </script>

我查看了视图源,它引用了两个头文件.这可能导致错误.我正在使用magento.菜单正在网站的所有页面上工作,除了一页结帐.

固定!下面的内容将在7小时内发布时作为答案发布

问题不在于javascript本身,而在于超级鱼菜单的css.设计布局并编码模板的开发人员列出了superfish菜单的样式表:

    <link rel="stylesheet" type="text/css" href="http://www.domainname.com/css/superfish.css" media="screen">

删除"http://www.domainname.com"并将其保留为"/css/superfish.css"后,修复了菜单.

我的网站上有两个菜单,.superfish()下面都会调用它们.

$("ul.sf-menu").superfish();

如果我们实际上在页脚菜单中,代码工作正常,但如果我们在标题菜单中,我会得到以下错误:

TypeError: o is undefined
clearTimeout(o.sfTimer);

这是超级鱼菜单或我的代码的错误吗？

我正在使用版本1.7.2的superfish和1.7.1版本的jQuery.

仅在IE7中,子菜单显示在我页面的内容下.我使用bgframe插件.

这里是我的代码:$("ul.sf-menu").superfish({speed:'fast',autoArrows:false //禁用箭头标记生成}.)find('ul').bgIframe({opacity} :假});

你有什么想法？

非常感谢你.再见Z.

对于我的生活,我无法让我的Superfish菜单停止隐藏在IE 7中的jQuery UI选项卡后面.我已经阅读了那里的文档,尝试更改z-index值并尝试了bgIframe插件,虽然我不确定是否我正确地实现它(在下面的例子中省略了,使用Supersubs).

这是我用于Superfish的Javascript - 使用Supersubs插件:

 $(document).ready(function() { 
                        $("ul.sf-menu").supersubs({ 
                        minWidth:    12,   // minimum width of sub-menus in em units 
                        maxWidth:    27,   // maximum width of sub-menus in em units 
                        extraWidth:  1     // extra width can ensure lines don't sometimes turn over 
                                   // due to slight rounding differences and font-family 
                    }).superfish({ 
                        delay:       1000,                            // one second delay on mouseout 
                        animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
                        speed:       'medium'                          // faster animation speed 
                    }); 
                    });

这是我的页面结构:

<div id="page-container">
        <div id="header"></div>
        <div id="nav-admin"> …

我在下一行中收到"对象不支持此属性或方法"错误...

$("ul.sf-menu").superfish({ 
        pathClass: 'current-subs'
    });

我的理解是superfish.js应该定义该方法.寻求帮助是令人尴尬的,因为它可能是非常愚蠢的东西,但可能是由于我对jQuery的无知,我无法掌握它.

它正在做什么的例子:http://screenr.com/k2X

我将div class ="container_12 header"的z-index设置为2,将div class ="container_12 content"设置为1

ul class ="sf-menu"设置为99,它位于container_12标题div中

我之前遇到过这个问题,并且认为为类设置适当的z-index可以解决问题,但它仍然给我显示下面div后面的下拉菜单的问题(container_12内容)

感谢任何帮助,谢谢.

.container_12.content {
  z-index: 1;
}

.container_12.header {
  background-color:#030;
  height:125px;
  border:1px solid yellow;
  z-index: 2;
}

所以我试着浏览一下这里的所有帖子,但我发现我的问题在任何地方都没有复制(虽然我说的更多是谷歌的能力,而不是我的情况的独特性)

基本上我有一个基于wordpress的网站(vegasonthemic.com)使用superfish插件导航菜单.我可以访问每个页面顶部导航栏中的下拉菜单项,但个别艺术家帖子项除外.(所有艺术家/声学男/点击其中一张图片.)

当我进入这样一个页面时:http://vegasonthemic.com/portfolio-item/nate-ridgely-2012-04-19/并尝试访问All Artists下拉菜单,它不会一直显示在firefox和IE以及它在chrome中创建了这些粗糙的滚动条.

我已经尝试过调整z-indices和overflow:visible; s到我的小心脏的内容,并且无法弄清楚为什么地球上发生了这种情况.