Javascript 菜单不同的屏幕尺寸

Question

我有一个网站，它有一个导航栏，它在主页眉中穿过整个页面。对于手持屏幕设备，我希望导航列表 ( <ul><li> ) 折叠(使用 CSS 设置 display: none; )并出现一个新栏，允许单击以展开菜单并将显示属性更改为显示:初始;

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

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

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

Answer 1

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

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

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

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

如果这对您有帮助，请告诉我。我可以为你写代码，但我不想在没有看到你能先实现什么的情况下继续实现它，随意用一些代码编辑你的问题......以上几点应该足以让你开始正确方向。