How has this search page been implemented (javascript, css, jquery?)?

Question

http://designspiration.net - If you click on search at the top of the page, you are presented with a really cool minimal search form, But I cannot find out how they did it. Does anyone know/could anyone find out what was used? Thanks

Answer 1

It's done with CSS and jQuery, pretty easy actually. I have created an example on jsFiddle demonstrating how it could be done:

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

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

});

Have a look here: http://jsfiddle.net/peduarte/VeRMW/

The main functions are, click, fadeIn and fadeOut.

Answer 2

It uses an overlay on the whole page and a big text field with no borders which search on enter and some suggestions

You could do it by jQuery & CSS