Question

我正在尝试实现一个非画布菜单。我在Smashing杂志上找到了这个例子并实现了菜单 - 除了只有少量内容的页面外，它的效果很好;幻灯片输出菜单中的项目仅显示内容的最低限度。

如果您的内容和菜单项很少，Smashing Magazine上的示例无法正常运行。我已经在Smashing Magazine的帖子上发表了评论，但还没有收到回复。

如果单击红色框，则会出现菜单;它并没有顺利滑出，因为我没有包含javascript（我认为我的问题在于内部和外部包装中的css）。菜单应该有11个项目，但你只能看到8个。

#outer-wrap {
position: relative;
overflow: hidden;
width: 100%;
}

#inner-wrap {
position: relative;
width: 100%;
}

我真的不想以其他方式重建菜单。非常感谢任何帮助!!谢谢....

Answer 1

你的菜单位于外包装div内，溢出：隐藏。这意味着任何超出外包装的元素都将被隐藏＆＃34;。只需删除溢出，它应该工作正常（或把它＆＃34;可见＆＃34;）

Answer 2

当视口宽度足够小并且nav元素的位置从relative变为absolute时，这意味着它会跳出normal flow。因此，它的视觉尺寸根本不会影响其他元素，从而导致视觉上不完整的菜单。

要解决此问题，您可以将nav的父级div赋予固定高度或最小高度，或将nav的位置设置为relative并以另一种方式显示。< / p>

好吧，也许你只是想要代码。

var lis = document.querySelectorAll("#nav li");
var minHeight = 41 * lis.length; //41 is the height in pixel of your single menu item
document.getElementById("#nav").style.minHeight = minHeight + 'px';

画布菜单在内容很少的页面上被截断

2 个答案: