這個搜索頁面是如何實現的（javascript，css，jquery？）？

Question

http://designspiration.net - 如果您點擊頁面頂部的搜索，您將看到一個非常酷的最小搜索表單，但我無法找到他們是如何做到的。有誰知道/有誰可以找出使用的是什麼？由於

Answer 1

它使用整個頁面上的覆蓋且無國界，其上輸入搜索大的文本字段，並提出了一些建議

您可以通過jQuery的& CSS做

Answer 2

它與CSS和jQuery做，實際上很容易。 我已經創建了jsFiddle範例顯示瞭如何可以做到：

$(document).ready(function(){ 
    var $overlay = $('#overlay'); 
    $('#search').click(function(){ 
     if ($overlay.is(':visible')) { 
      $overlay.fadeOut(); 
     } else { 
      $overlay.fadeIn(); 
     }   
    }); 

    $('#close').click(function(){ 
     $overlay.fadeOut(); 
    }); 

}); 

看一看這裏：http://jsfiddle.net/peduarte/VeRMW/

主要功能是，click，fadeIn和fadeOut。