Javascript菜单不同的屏幕尺寸

Question

我有一个网站，该网站的主标题页中有一个导航栏。 对于手持式屏幕设备，我希望导航列表（ <ul><li> ）折叠（使用CSS设置display: none; ），并出现一个新的栏，允许单击以展开菜单并更改显示属性显示：初始；

使用CSS @media查询，我可以对其进行调整，而javascript代码可使菜单展开和折叠。

但是，一旦折叠，CSS就不会覆盖较大屏幕尺寸的JavaScript。

如何确保较大屏幕的导航始终存在，但对于移动网站却无法折叠？

Answer 1

您将必须使用桌面优先方法。 为所需的桌面样式编写CSS，并在以后使用媒体查询覆盖。

Answer 2

请注意，您要实现的目标有两个方面：CSS + Javascript。 我相信您的困惑在于这两者将如何协同工作，那么让我们澄清一下：

1. 您将需要编写两个菜单栏，一个用于桌面宽度（768像素以外的任何宽度或您决定的大小），另一个用于移动宽度（至少为320像素）。 您可以使用CSS媒体查询来显示或隐藏每个媒体查询，请勿为此任务使用Javascript。

2. 使用Javascript（...或jQuery，因为它具有以下出色的功能）来控制导航栏的行为，例如单击事件等。 最好看看fadeToggle函数（以及类似的函数）来实现移动导航栏的动画（可折叠与否）。

这样，您可以确保导航始终存在。 关于用户体验的建议：如果您将使用图标来表示某些导航栏元素，请确保使用图标+文本，这样任何人都可以清楚地看到图标所代表的含义。

让我知道这是否对您有帮助。 我可以为您编写代码，但我不想在没有看到您可以首先实现的目标的情况下继续实施它，可以随时使用一些代码来编辑您的问题...以上几点应足以使您从正确的角度入手方向。