在全覆盖搜索菜单上提供建议(Advices on full overlay search menu)

在全覆盖搜索菜单上提供建议(Advices on full overlay search menu)

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

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

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

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

我真的不知道要粘贴哪些代码，并且如果甚至需要粘贴代码，那么如果您希望我粘贴任何内容，请说出内容。 谢谢！

I started a blog. I'm new to coding and I want to transform my Search menu into a full overlay search menu. But for mobile devices, I only want something like this:

And I don't really know, should I make a brand new search menu only for mobiles, or edit that one with resizing and other stuff?

I'm working on WordPress, and I know that there are plugins for this work, but I want to learn how to do it by myself. Not only that, but coding as all. And yea, I know it's bad, but it's my first one! :) So any suggestions would be really appreciated.

My blog link:www.shreddingnation.com

I really don't know which code to paste, and if there is even any need to paste code, so if you want me to paste anything, just say what. THANKS!

最满意答案

一种方法是使用Css媒体查询。 因此，在这种情况下，宽度<= 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');

之后/ *显示搜索字段* / add

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

希望这可以帮助...

One way to do that is to use Css Media Queries. So in this case at a width <= 600px there will be a full search overlay.

1) Add the following css to 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) Add the following js to /wp-content/themes/yuuta/assets/js/theme.js

after /* hide search field */ add

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

and after /* show search field */ add

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

Hope this helps...