Javascript下拉菜单小部件

Question

我有一个由＆lt; ul＆gt;组成的菜单。在Web CMS中。 我想要几个菜单项来显示下拉列表中显示的子项。这些子项也是＆lt; ul＆gt ;.

使用几行CSS和Javascript基本上很容易，但我正在寻找一个现成的Javascript解决方案来帮助我处理以下事项：

• 处理屏幕边缘情况：如果下拉菜单中的任何部分位于当前视口之外，请将其放置在视口内。

这是从头开始编码的婊子。

“很高兴”是：

• 在下拉按钮下方居中定位

• 将onclick事件添加到正文中，以便在下拉菜单外单击将关闭它;之后彻底清除onclick事件

但是如果有必要，我可以自己做。

一个漂亮，小巧，不显眼的小部件，可以神奇地转换我的＆lt; ul＆gt;会很可爱的。

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

Answer 1

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

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

也可以点击下拉按钮的确切位置，然后你应该应用基本的数学运算来定位它下面的菜单。