Javascript 下拉菜单小部件

Question

我在 Web CMS 中有一个由

组成的菜单。我希望几个菜单项具有显示在下拉列表中的子项。这些子项也是
。

这基本上很容易用几行 CSS 和 Javascript 来完成，但我正在寻找一个现成的 Javascript 解决方案来帮助我处理以下问题:

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

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

“很高兴拥有”是:

• 下拉按钮下方居中定位

• 向正文添加一个 onclick 事件，以便在下拉菜单外单击将关闭它；之后彻底删除 onclick 事件

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

一个漂亮、小巧、不显眼的小部件可以神奇地转换我的

会很可爱。

如果解决方案基于框架，则它必须是原型(prototype)，因为我在 CMS 中使用的就是原型(prototype)。

Answer 1

您可以获得 UL 的偏移量，并检查它们是否在视口(viewport)的特定距离内。

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

也有可能获得被点击的下拉按钮的确切位置，然后您应该应用基础数学来将菜单定位在它下面。