使菜单响应答案

【问题标题】：Making a menu responsive使菜单响应
【发布时间】：2012-10-30 07:50:29
【问题描述】：

我有一个fiddle，它显示了我构建的菜单。

这是一个垂直菜单。我遇到的问题是我添加到菜单中的<li>s 越多，就越难以适应屏幕。

例如：顶部菜单项 (A) 的大部分内容都超出了屏幕。想象一下，如果菜单有很多项（a、b、c、d ...z），底部的菜单项（z）会超出屏幕底部。

让我的问题更加复杂，想象一下菜单中间的一个菜单项有很多元素。这也将超出屏幕顶部。这不是我想要的。我实际上希望菜单弹出来响应它周围的窗口并适合自己。

我已经开始告诉每个小组在显示自己之前将自己置于中心位置：

var groupList = $(e.target).find('.group-list');
groupList.css({
    'margin-top': (-groupList.height() / 2) + 'px'
});
groupList.show();

不幸的是，这还不够。但是，我不确定如何让每个人都知道它周围的窗口，并做出足够的响应以适应窗口。

如何重写我的 groupList.css({}) 代码以使 group-list 类具有响应性并适合窗口内？

编辑：我很抱歉这么罗嗦。我想解释一下我遇到的设计问题，以便大家都能理解并希望为我指明正确的方向。

【问题讨论】：

【解决方案1】：

如果我正确理解您的需求，希望这将回答您的问题。我将获得围绕您的完整点亮项目/菜单的包装的总高度。然后将其与以下类似的变量进行比较：

变量高度 = $(document).height(); // 获取文档高度 var 宽度 = $(window).width();

//然后始终将其与您的列表高度进行比较。如果高度达到您想要的限制点，则创建一个新列并将您的列表附加到它。这样，它总是在调整大小并且永远不会挂在 Windows 视口之外。

然后，您将创建弹出列表项所在的第二个框。将其与文档高度进行比较，并将底部 css 设置为 0px。

如果这没有帮助，请随时通过 generic_brand@ymail.com 给我发送电子邮件，我将创建一个 sn-p 向您展示我的解释示例。编码愉快，祝你好运！

【讨论】：