如何在屏幕缩小时替换菜单

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呈现。