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

Question

这更多地寻找源材料，因为我找不到我正在寻找的工作示例。我有一个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");
});

这样编写代码非常简单快捷，只需将其视为2个单独的菜单，并在每个菜单中分别设置样式。