javascript - 在按钮单击时移动的 HTML 水平菜单

Question

我需要创建一个水平菜单，显示给定浏览器大小的所有可能项目，其余项目被隐藏（它们不会换行到下一行）。然后在 div 的最右侧有一个箭头按钮，单击它时会显示下一行项目。我怎样才能做到这一点？我不是要求任何人为我编写代码，我只是需要一些指导。网上有这方面的例子吗？我不希望箭头按钮在屏幕上缓慢移动项目。我需要它来“跳”到下一行。

例如，如果项目列表由三个组成，每个 li 元素的长度为 100px，总页面为 200px，则其中一个元素将被隐藏。单击按钮后，前两个项目消失，最后一个项目显示。

Answer 1

有很多方法可以做到这一点，你可以让ul位置：相对，然后是li位置：绝对，点击时，改变lis的位置来显示它们。

Answer 2

正如纪广所说。有很多方法可以做到这一点。重要的是您希望如何实施它，或者更好地说是如何实施您的项目的其余部分。

对于纪光所说的菜单，您可以创建一个水平样式列表（可能使用 float left on li 为此）。现在必须将 ul 声明为相对且固定的高度或宽度，并隐藏溢出，或者最好根据需要固定高度并设置相对于页面的宽度。对于箭头去扔其余的行，我猜你想要的是某种类型的旋转木马。现在网上有很多不错的插件可用。或者您可以随时自己完成。如果你打算自己做，那么你需要听从纪光的建议。将菜单 ul 放在另一个 div 中，然后玩 ul 的定位。