jquery - 通过 CSS 或 jQuery 将导航栏变成全宽搜索栏

Question

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

如有任何帮助，我们将不胜感激。

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;
}

希望这对您有所帮助。