FG jQuery菜单溢出

Question

我正在尝试使用Filament Group创建的iPod Drilldown jquery plugin。

似乎当HTML列表（最终构成向下钻取菜单）变得太长时，向下钻取菜单将显示在主按钮上方（并且在屏幕外）。

示范...... 比较这个工作版本：http://goo.gl/OKGFn 对于此非工作版本：http://goo.gl/LGMjV

这些URL之间的唯一区别是列表的长度。

我通过Chrome devtools在生成的div上切换了 bottom CSS属性，菜单又回到了视图中。我尝试使用jquery删除此 bottom CSS属性，但我无法通过$("#flyout").click修改它，因为在点击后它不会立即 。 ..

如何才能使菜单正确显示，与列表长度无关？

修改1 ：我发现这是flyOut: true属性的问题。禁用此功能时，菜单会正常显示，但我仍然需要弹出功能......

Answer 1

我遇到了同样的问题，但以下问题解决了我：

        . . .
        positionOpts: {posX: 'left', posY: 'bottom',  offsetX: -200, offsetY:-300},
        flyOut: true,
        . . .

但是你必须至少将这四个属性赋予positionOpts！ 如果缺少offsetX或offsetY，则菜单根本不会显示。 如果缺少posY，则表现为“顶部”，即始终位于按钮上方。

Answer 2

这是一个简单的解决方案，我中和了放置底部CSS属性的条件。

fg.menu.js

第503行

if (true || options.positionOpts.directionV == 'up') {

Answer 3

您的链接已损坏，但如果我的问题相同，则height的{​​{1}}仅在初始化时检查，而不是在您单击菜单级别之间移动时。

首先，将content设置为相对于列表大小的内容：

maxHeight

然后，在fgmenu.js中，更改函数checkMenuHeight，以查看内容div：

.menu({
  maxHeight: 350
});

Answer 4

这些都不适合我。我的问题是，当屏幕高度太小而无法显示整个菜单时，它会向上打开而不是向下打开，可能会耗尽屏幕。我想强迫它永远打开而不是打开。 这是通过替换fg.menu.js中的下一行来完成的：

FROM：

if (!fitVertical(subList, $(this).offset().top)) { subList.css({ top: 'auto', bottom: 0 }); };

TO：

if (!fitVertical(subList, $(this).offset().top)) { subList.css({ top: 0, bottom: 'auto' }); };