JavaScript 下拉菜单小部件

Question

3

我有一个由<ul>组成的菜单，是在Web CMS中实现的。我希望有几个菜单项拥有子项，并以下拉列表的方式显示。这些子项也是<ul>元素。

通常只需要使用几行CSS和Javascript代码即可完成此操作，但我正在寻找一个现成的Javascript解决方案，以帮助我处理以下问题：

- 解决屏幕边缘情况：如果任何部分的下拉菜单会超出当前视口，将其放置在完全位于视口内。 - 这对于从头开始编写代码而言很麻烦。

如果还能做到以下功能就更好了：

- 在下拉按钮下方集中定位。 - 为页面添加onclick事件，以便在单击下拉菜单外部时关闭它；然后干净地删除onclick事件。但如果必要的话，我自己也可以实现这些功能。

希望有一个美观、小巧、不显眼的小部件，可以神奇地将我的<ul>转换成下拉菜单。

如果解决方案基于框架，则必须使用Prototype，因为这是我在CMS中使用的框架。

- Pekka

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user215361 · Accepted Answer

您可以获取UL的偏移量，并检查它们是否在视口的某个距离范围内。

// Pseudo code
var ul = document.getElementById("menu");
if(ul.offset.x + ul.width > viewport.width) {
    ul.offset.x = viewport.width - ul.width;
}

您可以获取下拉按钮点击的确切位置，然后应用基本数学知识将菜单定位在其下方。