我有一个网站，在主 Headers 的页面上有一个导航栏 . 对于手持屏幕设备，我希望导航列表（ <ul><li> ）折叠（使用CSS设置 display: none; ）并显示一个新栏，允许单击以展开菜单并将显示属性更改为display：initial;
使用CSS @media 查询我可以调整就好了，javascript代码使菜单展开和折叠 .
但是一旦崩溃，CSS就不会覆盖JavaScript以获得更大的屏幕尺寸 .
如何确保导航始终适用于较大的屏幕尺寸，但允许其针对移动网站进行折叠？
2 回答
您将不得不使用桌面第一种方法 . 编写css以获取您希望桌面样式的内容，并在以后使用媒体查询覆盖 .
请注意，您要实现的目标有两个方面：CSS Javascript . 我相信你的困惑在于这两者如何协同工作，那么让我们说清楚：
您需要编写两个菜单栏，一个用于桌面宽度（超过768px或任何您决定的），另一个用于移动宽度，最小为320px . 您可以使用CSS媒体查询来显示或隐藏每个，不要使用Javascript执行此任务 .
使用Javascript（...或jQuery，因为它具有以下良好的功能）来控制导航栏的行为，例如点击事件等 . 您可以查看fadeToggle函数（和类似函数）来实现移动导航栏的动画（可折叠或不折叠） .
这样您就可以确保始终存在导航 . 在用户体验方面的建议：如果您将使用图标来表示某些导航栏元素，请确保使用图标文本，这样任何人都可以清楚地看到图标所代表的内容 .
如果这有助于你，请告诉我 . 我可以为你编写代码，但是我不想在没有看到你能够实现的目标的情况下实现它，随意用一些代码编辑你的问题...以上几点应该足以让你开始在右边方向 .