javascript - 屏幕尺寸缩小时如何替换菜单？

Question

我有一个水平菜单。

当屏幕宽度低于某个点时，我想用下拉菜单替换此菜单。

我不是在谈论响应式菜单，即自动调整自身的菜单。

大多数响应式教程都是关于响应式菜单的。我想创建类似的效果，但我想用下拉列表完全替换水平菜单。

谢谢

Answer 1

你对术语感到困惑。您要求的是响应式设计，即一旦窗口缩小到一定宽度以下，就做一些不同的事情。

让页面上的两个元素（默认隐藏一个），并使用响应式 CSS 根据浏览器宽度隐藏/显示您想要的元素。例如：

.menuDrop{ display:hidden; }
.menuHoriz{ display:block; }

@media (max-width: 500px) {
  .menuDrop{ display:block; }
  .menuHoriz{ display:hidden; }
}

Stacy，为了您自己的澄清，我相信您所说的您不想要的是仅流体设计，即菜单只是随浏览器窗口缩小。菜单是否流动与是否响应不同是不同的。@jainchetan 的“MeanMenu”示例既流畅（它最初随着窗口缩小）和响应式（在某个点，设计以逐步方式发生变化），使用 Javascript 而不是 CSS 呈现。