全覆盖搜索菜单上的建议

Question

我开了个博客。我是编码的新手，我想将我的搜索菜单转换为完整的叠加搜索菜单。但对于移动设备，我只想要这样的东西：

我真的不知道，我应该只针对手机制作一个全新的搜索菜单，还是通过调整大小和其他内容来编辑一个？

我正在使用WordPress，我知道有这个工作的插件，但我想学习如何自己做。不仅如此，还可以编码。是的，我知道它很糟糕，但它是我的第一个！ :)所以任何建议都会非常感激。

我的博客链接：www.shreddingnation.com

我真的不知道要粘贴哪些代码，如果甚至需要粘贴代码，那么如果您要我粘贴任何内容，请说明一下。谢谢！

Answer 1

一种方法是使用Css Media Queries。因此，在宽度<= 600px的情况下，将存在完整的搜索覆盖。

1）将以下css添加到wp-content / themes / yuuta / style.css

@media all and (max-width: 600px) {
    .site-header .search-form.search-form--active {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: #fff;
        height: calc(100vh - 80px);
    }
    .site-header .search-form input.search-field {
        border: 1px solid #000;
        color: #000;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

2）将以下js添加到/wp-content/themes/yuuta/assets/js/theme.js

在/ *隐藏搜索字段* /添加

之后

$('body').css('overflow','auto');

和/ *显示搜索字段* /添加

$('body').css('overflow','hidden');

希望这会有所帮助......