Javascript 根据可用宽度展开菜单

我一直在研究创建响应菜单的方法

标准技术是在小型设备上使用navicon，这将触发某种弹出/下拉菜单

我想在屏幕上显示最常见的选项，所以我想到了导航栏，它只包含几个重要的菜单项，在较小的设备上可以看到。这仍然需要navicon显示任何其他项目

然后我发现一个菜单更符合我的要求，因为它更具动态性。其概念是，菜单随着屏幕大小的增长而增长，但只有当屏幕宽度足以完全容纳菜单时，才会显示一个选项。其余选项隐藏在动态navicon下

这是菜单：

正如您将看到的，更改屏幕宽度会更改可用选项

我可以使用媒体查询断点生成一个半动态版本，但最好能够创建一个完全动态的版本。我猜它使用的是javascript——但就能够确定可用空间和所需空间的技术而言，我不知道从哪里开始

我有一些基本的js/jquery知识，但如果有人能给我一些指导，告诉我如何进行这项工作，我将不胜感激

---

提前感谢。

响应式菜单不算什么，但它只是根据屏幕大小进行风格操纵。您可以使用CSS3媒体查询来完成此操作。它具有定义屏幕大小的内置功能

@media (max-width: 912px) and (min-width: 681px)

然后，您需要操纵样式表。这是非常常见的方法。尽管如此，您也可以通过使用窗口调整大小事件来使用javascript，并相应地更改样式表。因此，无论何时调整窗口大小，它都会自动覆盖已定义的样式表

尽管如此，不建议通过javascript来管理它，因为它在管理样式时有很多代码复杂性。使用CSS媒体查询

---

希望这有帮助：）

谢谢你的建议Chanchal