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

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 id="panel" class="panel hidden">
  <div class="padding">
      <form>
        <input type="search" id="szukaj" placeholder="Znajdź to, czego potrzebujesz...">
        <label for="szukaj" class="visuallyhidden">Wyszukiwarka</label>
      </form>
      <button id="remPanel" class="close" href="#">✖</button>
  </div>
</div>

<button id="pokazPanel" class="open" href="#">Szukaj</button>

<form>

<label for="szukaj" class="visuallyhidden">Wyszukiwarka</label>

</form>

</div>

<button id="pokazPanel" class="open" href="#">Szukaj</button>

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.

body {
  border-top: 5px solid #380031;
  margin: 0;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  }

body {

border-top: 5px solid #380031;

margin: 0;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

}

Dobrze, teraz musimy ostylować sam panel:

.panel {
  position: absolute;
  top: 0; right: 100px;
  height: 30px;
  padding: 10px 0 10px;
  border-radius: 3px;
  background: #380031;
  z-index: 2;
  }

.panel {

position: absolute;

top: 0; right: 100px;

height: 30px;

padding: 10px 0 10px;

border-radius: 3px;

background: #380031;

z-index: 2;

}

Oraz pole wyszukiwania:

.panel form {
  width: 285px;
  }
.panel input {
  margin: 0;
  width: 250px;
  border: 2px solid #eee;
  font-size: 14px;
  padding: 5px;
  border-radius: 3px;
  float: left;
  }

.panel form {

width: 285px;

}

.panel input {

margin: 0;

width: 250px;

border: 2px solid #eee;

font-size: 14px;

padding: 5px;

border-radius: 3px;

float: left;

}

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

.panel .close {
  display: block;
  border: 0;
  background: none;
  cursor: pointer;
  float: right;
  padding: 0px;
  padding-left: 10px;
  font-size: 23px;
  color: #fff;
  text-decoration: none;
  z-index: 3;
  }

.panel .close {

display: block;

border: 0;

background: none;

cursor: pointer;

float: right;

padding: 0px;

padding-left: 10px;

font-size: 23px;

color: #fff;

text-decoration: none;

z-index: 3;

}

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

.padding {
  padding: 0 10px 0;
  }

.padding {

padding: 0 10px 0;

}

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.

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

.hidden {
  top: -50px;
  }

.hidden {

top: -50px;

}

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

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

.open {
  position: absolute;
  top: 0; right: 100px;
  height: 50px;
  width: 90px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  display: block;
  border: 0;
  text-decoration: none;
  font-size: 14px;
  line-height: 30px;
  padding: 10px 10px 10px;
  border-radius: 3px;
  background: #380031;
  transition: .3s ease-in;
  z-index: 1;
  }

.open {

position: absolute;

top: 0; right: 100px;

height: 50px;

width: 90px;

text-align: center;

cursor: pointer;

color: #fff;

display: block;

border: 0;

text-decoration: none;

font-size: 14px;

line-height: 30px;

padding: 10px 10px 10px;

border-radius: 3px;

background: #380031;

transition: .3s ease-in;

z-index: 1;

}

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

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow:
  visible;
  position: static;
  width: auto;
  }

.visuallyhidden {

border: 0;

clip: rect(0 0 0 0);

height: 1px;

width: 1px;

margin: -1px;

overflow: hidden;

padding: 0;

position: absolute;

}

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {

clip: auto;

height: auto;

margin: 0;

overflow:

visible;

position: static;

width: auto;

}

Spójrzmy na nasz przykład.

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:

<script src="https://code.jquery.com/jquery.js"></script>

1	<script src="http://code.jquery.com/jquery.js"></script>

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

<script type="text/javascript">
$(document).ready(function() {
  $("#pokazPanel").on("click", function() {
    $("#panel").removeClass("hidden");
    $("#pokazPanel").addClass("hidden");
    $("#szukaj").focus();
  });
  $("#remPanel").on("click", function() {
    $("#panel").addClass("hidden");
    $("#pokazPanel").removeClass("hidden");
  });
  
});
</script>

$(document).ready(function() {

$("#pokazPanel").on("click", function() {

$("#panel").removeClass("hidden");

$("#pokazPanel").addClass("hidden");

$("#szukaj").focus();

});

$("#remPanel").on("click", function() {

$("#panel").addClass("hidden");

$("#pokazPanel").removeClass("hidden");

});

</script>

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:

transition: .3s ease-in;

1	transition: .3s ease-in;

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”

Comandeer pisze:
2 września 2013 o 13:42
„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?)
Odpowiedz
- Michał Kortas pisze:
  2 września 2013 o 13:48
  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!
  Odpowiedz
  - pomek pisze:
    2 września 2013 o 14:00
    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…
  - Michał Kortas pisze:
    2 września 2013 o 14:06
    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.
Mr.Mr pisze:
2 września 2013 o 17:32
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.
Odpowiedz
- Michał Kortas pisze:
  2 września 2013 o 18:12
  Uwzględniłem wszelkie wskazówki :) Dzięki!
  Odpowiedz
Pawelelo520 pisze:
13 marca 2014 o 14:39
Gdzie jest link do pliku w którym będzie wyszukiwany plik?
Odpowiedz
Michał Kortas pisze:
18 marca 2014 o 10:30
To tylko front panelu w HTML i CSS. Obsługę wyszukiwania musisz zapewnić sobie już sam.
Odpowiedz
Damian pisze:
26 marca 2014 o 15:54
przycisk Zobacz DEMO on-line nie działa a w paczce z kodem źródłowym jest jakaś grafika
Odpowiedz

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

Założenia wstępne

Tworzenie wysuwanego panelu

Kod HTML5

Style CSS3

Kod JavaScript (jQuery)

Animacja wysuwania

Podsumowanie

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

Dodaj komentarz Anuluj pisanie odpowiedzi

Partner technologiczny

Najnowsze komentarze

Robert

początkujący

Tom

awprojekt

Temat