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:
Tworzenie wysuwanego panelu
Kod HTML5
Zacznijmy oczywiście od utworzenia potrzebnych elementów w kodzie HTML:
1 2 3 4 5 6 7 8 9 10 11 | <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> |
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.
1 2 3 4 5 | body { border-top: 5px solid #380031; margin: 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } |
Dobrze, teraz musimy ostylować sam panel:
1 2 3 4 5 6 7 8 9 | .panel { position: absolute; top: 0; right: 100px; height: 30px; padding: 10px 0 10px; border-radius: 3px; background: #380031; z-index: 2; } |
Oraz pole wyszukiwania:
1 2 3 4 5 6 7 8 9 10 11 12 | .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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | .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.
1 2 3 | .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.
1 2 3 | .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ę.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .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).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .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:
1 | <script src="http://code.jquery.com/jquery.js"></script> |
Skrypt obsługujący zdarzenia kliknięcia jest taki, jak poniżej:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> |
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:
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
„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żemymusimy dodać (dziękuję za poprawkę, @pomek).No i na sam koniec, zapomniałem wszystko opakować w „form”.
Pozdrawiam!
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.
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.
Uwzględniłem wszelkie wskazówki :) Dzięki!
Gdzie jest link do pliku w którym będzie wyszukiwany plik?
To tylko front panelu w HTML i CSS. Obsługę wyszukiwania musisz zapewnić sobie już sam.
przycisk Zobacz DEMO on-line nie działa a w paczce z kodem źródłowym jest jakaś grafika