Как реализована эта страница поиска (javascript, css, jquery?)? - PullRequest
Новая
       6

Как реализована эта страница поиска (javascript, css, jquery?)?

4 голосов
/ 29 ноября 2011

http://designspiration.net - Если вы нажмете на поиск в верхней части страницы, вы получите действительно классную минимальную форму поиска, но я не могу узнать, как они это сделали.Кто-нибудь знает / кто-нибудь может узнать, что использовалось?Спасибо

Ответы [ 2 ]

6 голосов
/ 29 ноября 2011

Это делается с помощью 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/

Основные функции: нажмите , fadeIn и fadeOut .

2 голосов
/ 29 ноября 2011

Используется наложение на всю страницу и большое текстовое поле без границ для поиска при вводе и некоторые предложения

Вы можете сделать это с помощью jQuery & CSS

...