Javascript 菜单不同屏幕尺寸
Javascript Menu different screen sizes
我有一个网站，它有一个导航栏，它在主页眉中穿过整个页面。对于手持屏幕设备，我希望导航列表 (<ul><li>) 折叠（使用 CSS 设置 display: none;）并出现一个新栏，允许单击以展开菜单和将显示 属性 更改为显示：初始；
使用 CSS @media 查询我可以很好地调整它，javascript 代码使菜单展开和折叠。
但是一旦折叠，CSS 将不会覆盖更大屏幕尺寸的 JavaScript。
如何确保导航在较大的屏幕尺寸下始终存在，但在移动网站上允许它折叠？
您将必须使用桌面优先方法。为您想要的桌面样式编写 css，稍后使用媒体查询覆盖。
请注意，您要实现的目标有两个方面：CSS + Javascript。我相信你的困惑在于这两者如何协同工作，那么让我们把事情弄清楚：
您需要编写两个菜单栏，一个用于桌面宽度（超过 768 像素或您决定的任何宽度），另一个用于移动宽度，最小宽度为 320 像素。您可以使用 CSS 媒体查询来显示或隐藏每个媒体查询，请勿使用 Javascript 执行此任务。
使用Javascript（...或jQuery，因为它对以下内容有很好的功能）来控制导航栏的行为，例如点击事件和类似。查看 fadeToggle 函数（和类似函数）以实现移动导航栏的动画（可折叠或不可折叠）对您有好处。
这样您可以确保导航始终存在。一条关于用户体验的建议：如果你将使用图标来表示某些导航栏元素，请确保使用图标 + 文本，这样任何人都清楚图标所代表的内容。
如果这对您有帮助，请告诉我。我可以为你写代码，但我不想在没有看到你能先实现什么的情况下继续实施它，随意用一些代码编辑你的问题......以上几点应该足以让你开始正确方向.
我有一个网站，它有一个导航栏，它在主页眉中穿过整个页面。对于手持屏幕设备，我希望导航列表 (<ul><li>) 折叠（使用 CSS 设置 display: none;）并出现一个新栏，允许单击以展开菜单和将显示 属性 更改为显示：初始；
使用 CSS @media 查询我可以很好地调整它，javascript 代码使菜单展开和折叠。
但是一旦折叠，CSS 将不会覆盖更大屏幕尺寸的 JavaScript。
如何确保导航在较大的屏幕尺寸下始终存在，但在移动网站上允许它折叠？
您将必须使用桌面优先方法。为您想要的桌面样式编写 css，稍后使用媒体查询覆盖。
请注意，您要实现的目标有两个方面：CSS + Javascript。我相信你的困惑在于这两者如何协同工作，那么让我们把事情弄清楚：
您需要编写两个菜单栏，一个用于桌面宽度（超过 768 像素或您决定的任何宽度），另一个用于移动宽度，最小宽度为 320 像素。您可以使用 CSS 媒体查询来显示或隐藏每个媒体查询，请勿使用 Javascript 执行此任务。
使用Javascript（...或jQuery，因为它对以下内容有很好的功能）来控制导航栏的行为，例如点击事件和类似。查看 fadeToggle 函数（和类似函数）以实现移动导航栏的动画（可折叠或不可折叠）对您有好处。
这样您可以确保导航始终存在。一条关于用户体验的建议：如果你将使用图标来表示某些导航栏元素，请确保使用图标 + 文本，这样任何人都清楚图标所代表的内容。
如果这对您有帮助，请告诉我。我可以为你写代码，但我不想在没有看到你能先实现什么的情况下继续实施它，随意用一些代码编辑你的问题......以上几点应该足以让你开始正确方向.