通过CSS或jQuery将导航栏转换为全宽度搜索栏

Question

我发现这个非常整洁theme，当点击放大镜图标时，导航栏变成全角搜索栏。我想知道我怎么能意识到这一点。我的尝试是创建一个叠加输入字段并设置它的样式。但我认为它有类似插件或教程的东西。

非常感谢任何帮助。

Answer 1

无需插件即可轻松完成。

我假设您对HTML和CSS非常熟悉所以我将总结一下，但首先我要创建一个与标题部分高度相同的DIV，并将CSS放在标题上方。

当然，在这个DIV中你会把搜索表单。

给div 0不透明度并添加CSS过渡：

div.search {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

当页面加载时，搜索栏将不会显示，因为我们已设置opacity: 0;但是，使用Javascript，我们可以在搜索栏中添加show类，以便将其淡入，并且我们可以在用户点击某些内容时触发此操作：

$('.search-trigger').click(function() {
    $('div.search').addClass('show');    
});

我们会像这样设置show类的样式：

div.search.show {
    opacity: 1;
}

希望这有帮助。