Javascript菜单不同的屏幕尺寸

Question

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

使用CSS @media查询我可以调整得很好，javascript代码会使菜单展开和折叠。

但是一旦崩溃，CSS就不会覆盖JavaScript以获得更大的屏幕尺寸。

如何确保导航始终适用于较大的屏幕尺寸，但允许其针对移动网站进行折叠？

Answer 1

您必须使用桌面第一种方法。编写css，了解您希望桌面样式的内容，并在以后使用媒体查询覆盖。

Answer 2

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

1. 您需要编写两个菜单栏，一个用于桌面宽度（超过768px或任何您决定的），另一个用于移动宽度，最小为320px。您可以使用CSS媒体查询来显示或隐藏每个，不要使用Javascript执行此任务。

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

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

如果这有助于您，请告诉我。我可以为你编写代码，但是我不想在没有看到你能够实现的目标的情况下实现它，随意用一些代码编辑你的问题...以上几点应该足以让你开始在右边方向。