javascript - 仅在移动设备上全屏覆盖导航

Question

这更多的是寻找源 Material ，因为我找不到我正在寻找的内容的工作示例。我有一个 WordPress 菜单定期显示为内联链接。然而，当我进入移动尺寸的屏幕时，我希望它变成一个汉堡包菜单，在打开时将全屏覆盖在内容上。

我似乎只能找到执行其中一项或另一项操作的菜单。

我目前正在引入带有典型 wp 代码的菜单

html

<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>

希望基本上创建类似tympanus.net/Development/FullscreenOverlayStyles上的演示的东西 但全屏时我希望链接显示在顶部

Answer 1

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

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

以及针对较大屏幕的媒体查询，例如:

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

也许还有其他的可以满足您的个人需求。然后在小型媒体查询中，您的样式是否类似于:

.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-nav 中，您需要一个按钮来关闭导航，我也会使用 jQuery 来做到这一点:

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

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