使菜单响应式

Question

我有一个小提琴，显示我构建的菜单。

这是一个垂直菜单。我遇到的问题是我添加到菜单的

<li>

越多，就越难适应屏幕。

例如：顶部菜单项（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({}) 代码以使组列表类响应并适合窗口？

Answer 1

我会得到你的全亮项目/菜单周围的包装纸的总高度。然后将其与以下内容的变量进行比较：

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

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

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