Javascript菜单不同的屏幕尺寸

Question

我有一个网站有一个导航栏穿过主页眉中的页面。对于手持式屏幕设备，我希望导航列表（<ul><li>）折叠（使用CSS设置display: none;），并且出现一个新的条形图，以便点击展开菜单并将显示属性更改为显示：initial;

使用CSS @media查询我可以调整，只是罚款和JavaScript代码使菜单展开和折叠。

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

如何确保导航总是存在于较大的屏幕尺寸，但允许它在移动网站上折叠？

Answer 1

请注意，您尝试实现的内容有两个方面：CSS + Javascript。我相信你的困惑是在这两个如何协同工作，以及接下来就让我们把事情说清楚：

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

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

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

让我知道这是否帮助你。我可以为你编写代码，但是我不想先去看看你能够实现的第一步，随意用一些代码编辑你的问题......上面的点应该足以让你开始在右边方向。

Answer 2

您将不得不使用桌面第一种方法。编写你想要的桌面样式的CSS，并在以后使用媒体查询进行覆盖。