Nie każ szukać wyszukiwarki, czyli tworzenie wysuwanego panelu wyszukiwania w CSS3 i jQuery


2 września 2013 / Michał Kortas


Zainspirowany brakiem miejsca na wyszukiwarkę podczas tworzenia projektu strony internetowej dość długo zastanawiałem się, w którym miejscu najefektywniej mógłbym ją umieścić. Niestety byłem zmuszony do wymyślenia czegoś, co nie będzie ładować się bezpośrednio do ustalonego z góry (i zamkniętego już) układu witryny. Co robi w takiej sytuacji webmaster? Idzie zaparzyć kawę i zabiera się do pracy.

W dzisiejszym poradniku omówię w szczegółach proces tworzenia wysuwanego panelu, aktywnego dopiero po kliknięciu. Nie jest to nic odkrywczego, ale bardzo często może przydać się, kiedy chcemy wyróżnić niektóre informacje lub elementy na stronie www. Aby wykonać taki panel, użyjemy w dużej mierze możliwości CSS3, natomiast za akcję odpowiadać będzie dobrze nam wszystkim znane i lubiane jQuery. Zapraszam do lektury

Założenia wstępne

Na samym początku chciałbym jeszcze w skrócie omówić wstępne założenia naszego projektu. Chcemy, aby wyszukiwarka pokazywała się na górze strony, a przycisk, który będzie ją wywoływał, nigdy nie znikał z ekranu – tak, aby w każdej chwili można było go kliknąć i rozpocząć wyszukiwanie treści. Po przyciśnięciu przycisku „Wyszukaj/Szukaj” lub obrazka z imitacją lupy (pełna dowolność), schowa się on nad górną krawędź, a w zamian za niego niżej zejdzie pole wyszukiwarki.

Dla lepszego uzmysłowienia, efekt, do którego będziemy dążyć możecie ujrzeć w przygotowanym przeze mnie przykładzie:

Zobacz DEMO on-line

Tworzenie wysuwanego panelu

Kod HTML5

Zacznijmy oczywiście od utworzenia potrzebnych elementów w kodzie HTML:

Div#panel będzie naszym wysuwanym okienkiem, które zawiera pole wyszukiwania input. Dodatkowo dołączyłem div.padding, któremu nadamy odpowiedni margines wewnętrzny, w taki sposób, aby nie spowodować rozjeżdżania się strony poza boczne granice okna przeglądarki.

Odnośnik a#pokazPanel odpowiadać będzie za wysunięcie panelu po jego kliknięciu, natomiast link a#remPanel zamknie okienko.

Style CSS3

Zauważyliście zapewne również klasy przy każdym z elementów. Użyjemy ich do odpowiedniego ich sformatowania. Zacznijmy od samego kontenera <body>. Usuniemy marginesy i dodamy na samej górze nie zbyt grubą linię w wybranym przez nas kolorze.

Dobrze, teraz musimy ostylować sam panel:

Oraz pole wyszukiwania:

Ważnym elementem jest także przycisk zamykający:

Dodamy także wspomnianą klasę, odpowiedzialną za margines wewnętrzny panelu.

Mam nadzieję, że powyższych deklaracji nie muszę dogłębnie tłumaczyć. Jeżeli jednak będzie to Wam potrzebne, odsyłam na nasze forum dla webmasterów.

W tej chwili otrzymaliśmy następujący efekt.

Wysuwany panel w jQuery

Jesteśmy już blisko celu. Domyślnie jednak wyszukiwarka ma być ukryta, zatem do naszego arkusza CSS musimy dodać jeszcze style dla klasy .hidden.

Kod ten przesunie cały div#panel powyżej górnej granicy przeglądarki.

Pozostało nam jeszcze sformatowanie przycisku otwierającego wyszukiwarkę.

I klasa odpowiedzialna za wizualne ukrycie etykiety (dziękuję za podpowiedź czytelnikowi Comandeer).

Spójrzmy na nasz przykład.

Wysuwany panel jQuery

Jak widzimy, panel z wyszukiwarką jest niewidoczny, natomiast mamy dostęp do przycisku, który w zamyśle będzie go otwierał. Na tę chwilę zakończmy edycję arkusza CSS i przejdźmy do napisania niewielkiego skryptu w jQuery, który będzie wysuwał i zamykał tworzony panel.

Kod JavaScript (jQuery)

Na samym początku ładujemy bibliotekę jQuery (o ile wcześniej tego nie robiliśmy!).
Przed tagiem zamykającym </html> umieśćmy następujący kod:

Skrypt obsługujący zdarzenia kliknięcia jest taki, jak poniżej:

Jest on bardzo prostym ale i tak warto go omówić. Rozpoczynając od 4 linijki:

Z naszego panelu div#panel usuwamy klasę .hidden. Spowoduje to powrót okienka poniżej górnej krawędzi ekranu. Dodajemy ją zamiennie do odnośnika a#pokazPanel (linia 5). Aby ułatwić wpisywanie tekstu w polu wyszukiwania, dodajemy focus automatycznie na nie (linia 6).

Druga funkcja wywoła się, kiedy klikniemy przycisk zamykający. Mamy tu sytuację odwrotną, czyli: do naszego panelu div#panel dodajemy ponownie klasę .hidden (linia 8), a odnośnik pokazujący okienko przywracamy do pozycji początkowej, usuwając wspomnianą klasę (linia 9).

Animacja wysuwania

To prawie już wszystko. Dla lepszego efektu powinniśmy dodać jeszcze efekt płynnego przejścia. Proponuję w tym celu wykorzystać CSS3. Dla deklaracji stylów elementów .open oraz .panel w arkuszu CSS wstawmy następujący kod:

Podsumowanie

Na tym właściwie mogę zakończyć ten tutorial. Jeżeli macie jakiekolwiek pytania, zapraszam do komentowania poniżej wpisu. Dla większych problemów polecam jednak zakładanie osobnego wątku na naszym forum.

Zobacz DEMO on-line Pobierz pliki źródłowe



9 odpowiedzi na “Nie każ szukać wyszukiwarki, czyli tworzenie wysuwanego panelu wyszukiwania w CSS3 i jQuery”

  1. Comandeer pisze:

    „Przycisk” – zatem niech to będzie *przycisk* a nie bezużyteczny link.
    A co jeśli user nie ma JS (albo u niego nie działa)? Raczej szedłbym w kierunku :target z CSS3 i wgl wyeliminował JS. A jeśli już nie wyeliminował, to nie ciągnął jQuery tylko do zmiany klasy elementu. To nie jest aż tak skomplikowane do napisania w czystym JS (zwłaszcza w modern browserach, gdzie istnieje elem.classList).
    Plus cały problem dostępności: pole wyszukiwania wręcz musi mieć label (placeholder go nie zastępuje – jeśli ktoś twierdzi inaczej, radzę poczytać speckę). Można go ukryć przed wizualnymi przy pomocy sztuczki z clip (patrz: klasa .visuallyhidden z H5BP). No i trochę mnie śmieszy ten przykład, gdzie formularz wyszukiwania jednak nie jest formularzem ;)
    Natomiast wizualnie efekt jest bardzo dobry, choć bardzo przypomina natywną wyszukiwarkę przeglądarki (czy nie będzie to ciut mylące?)

    • Dzięki za komentarz! Faktycznie, mogłem skorzystać z elementu „button”. Skorzystałem z jQuery, ponieważ na większości stron i tak ładujemy tę bibliotekę. Label oczywiście możemy musimy dodać (dziękuję za poprawkę, @pomek).
      No i na sam koniec, zapomniałem wszystko opakować w „form”.
      Pozdrawiam!

      • pomek pisze:

        Dowiedz się do czego służy label, skoro twierdzisz, że „wedle uznania” można dodać. Label jest tak samo obowiązkowe dla input/select/textarea jak meta[charset] w head…

      • Spokojnie. Wiem do czego służy label :)
        Z resztą zaraz po sugestii dodałem etykietę do kodu źródłowego.
        Dziękuję za komentarz.

  2. Mr.Mr pisze:

    Bardzo fajny efekt. Myślę, że po małych upgradach (tak jak sugerowano poniżej) będzie to znakomity dodatek do UI stron gdzie już jQuery jest wykorzystywana.

  3. Pawelelo520 pisze:

    Gdzie jest link do pliku w którym będzie wyszukiwany plik?

  4. To tylko front panelu w HTML i CSS. Obsługę wyszukiwania musisz zapewnić sobie już sam.

  5. Damian pisze:

    przycisk Zobacz DEMO on-line nie działa a w paczce z kodem źródłowym jest jakaś grafika

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *