通过CSS或jQuery将导航栏变为全宽搜索栏

Question

我发现这个非常整洁的theme，当点击放大镜图标时导航栏变成全宽搜索栏。我想知道如何才能实现这一点。我的尝试是创建一个覆盖输入字段并对其进行设置。但我认为这有点像插件或教程。

任何帮助将不胜感激。

Answer 1

这很容易做到，而不需要插件。

我假设你对HTML和CSS很满意，所以我将总结一下，但首先我会创建一个与标题部分高度相同的DIV，并将CSS放在标题上方。

当然，在这个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; 
} 

希望这会有所帮助。