Javascript 仅在移动设备上使用全屏覆盖导航

这更多的是寻找源材料，因为我找不到我正在寻找的工作示例。我有一个Wordpress菜单作为内联链接定期显示。然而，当我进入手机大小的屏幕时，我希望它变成一个汉堡包菜单，打开时覆盖整个屏幕

我似乎只能找到做一个或另一个的菜单

我现在带着典型的wp代码进入菜单

html

希望基本上创建一些类似的演示

---

但是全屏我希望链接显示在顶部

因此首先需要一个媒体查询，在较小的屏幕上隐藏“主导航”并设置其样式，例如：

@media(max-width:767px){}

.main-nav{
    display:none;
    postition:fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2000;
}

以及针对更大屏幕的媒体查询，如：

@media(min-width:768px){}

也许还有更多的，以满足您的个人需求。然后在small media查询中，您是否将样式设置为：

@media(max-width:767px){}

.main-nav{
    display:none;
    postition:fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2000;
}

然后你还需要一个汉堡按钮来触发，这个按钮将隐藏在较大的屏幕上，并显示在较小的屏幕上

然后，该按钮可以触发.main nav在单击时显示，我会使用jQuery，如下所示：

$(".burger-button").click(function(e){
    e.preventDefault();
    $(".main-nav").fadeIn("slow");
});

然后在.main导航中，您需要一个按钮来关闭导航，我也会使用jQuery来实现这一点：

$(".close-button").click(function(e){
    e.preventDefault();
    $(".main-nav").fadeOut("slow");
});

---

编写这样的代码非常简单和快速，只需将其视为两个单独的菜单，并在各自的媒体查询中设置每个菜单的样式。

没有足够的代码可供使用。编写html显示的代码。你也可以添加链接的网站类似于你想要的。这是我的问题，我找不到它。因此，我更多地要求资源而不是代码。类似于这些，但当屏幕是全屏的时候，它会在顶部显示链接，所以我需要制作两个单独的菜单？同一个菜单只是在不同的屏幕大小上样式不同而已。大屏幕上的标准样式，隐藏burger toggle按钮，然后通常使用阻止列表项进行绝对或固定位置样式设置。如果您喜欢您的示例链接，您可以使用inspector工具查看那里的样式，看看它是如何完成的，然后只需添加JavaScript即可