Zakładki z treścią w stylu Google Gmail – przygotowanie krok po kroku


15 września 2013 / Michał Kortas


Jakiś czas temu po raz kolejny Google podarowało nam lekką modyfikację swojego popularnego webmaila, jakim jest Gmail. Był to krok, mający na celu poprawienie segregacji przychodzących do nas maili (pomijam już sam fakt skanowania wiadomości pod kątem treści, ale z tym nie kryje się nawet sam gigant z Mountain View), co dość skutecznie spełnia swoje zadanie. Aby odseparować te, z założenia, wartościowe wiadomości od przychodzących do nas z różnego rodzaju kont społecznościowych (Facebook, Twitter etc.) programiści Google’a skorzystali z dobrodziejstw zakładek (Tabs), szczególnie pod względem design’u znanych nam z popularnego Androida. W dzisiejszym poradniku przygotujemy taką funkcjonalność na naszej stronie internetowej. Zapraszam do lektury.

W tutorialu skorzystamy jak zwykle z możliwości CSS3, oraz niewielkiego skryptu w JavaScript (jQuery). Na samym początku przygotujmy jednak kod HTML5, który odpowiadał będzie za wyświetlanie całej struktury naszych zakładek, w raz z zawartą w nich treścią.

Struktura zakładek w HTML5

Rzecz jasna, jeżeli teraz odpalimy nasz kod, nie ujrzymy nic ciekawego, dlatego od razu zajmijmy się formatowaniem zakładek w arkuszu CSS.

Stylowanie zakładek w CSS3

Nawigacja zakładek

W pierwszej kolejności przygotujmy kod dla samej nawigacji zakładek. Na początek podstawy:

Myślę, że powyższy kod jest zrozumiały. Odniosę się tylko do działania pseudoklasy :nth-child, która w tym przypadku „wybiera” co trzeci element button z naszej nawigacji. Na przykład :nth-child(3n+1) odnosi się do co trzeciego elementu <button>, począwszy od drugiego w kolejności (numeracja od zera).

Aktywna zakładka

Aby wyróżnić aktywną zakładkę w nawigacji, dodajmy do niej klasę .activetab.

Selektor, jakim jest +, odpowiada za formatowanie elementu (w naszym przypadku <button>), który bezpośrednio przylega z prawej strony do określonego, innego elementu (u nas jest nim button.activetab).

Efekty dotychczasowej pracy są następujące.

Zakładki z treścią - nawigacja

Okienko z treścią zakładki

Domyślne formatowanie

Standardowo, okienka z treścią nie będą posiadać skomplikowanego formatowania. Co jednak ważne – wszystkie muszą być na początku ukryte.

Aktualnie widoczna treść zakładki

Aby aktywna zakładka wyświetlała tylko swoją treść, dodajmy do niej odpowiednią klasę.

Powyższe zabiegi kosmetyczne w naszym arkuszu stylów przyniosły nam poniższy efekt.

Tabs - okienko z treścią

Dynamiczne przełączanie zakładek

Mamy już opracowane wszystkie elementy z warstwy wizualnej. Pozostało nam jednak przygotowanie skryptu, który nada naszym zakładkom nieco dynamiki. Sposobem na to będzie użycie prostego skryptu napisanego w jQuery. Myślę, że większość witryn i tak ładuje tę bibliotekę, dlatego jeżeli tylko używacie jej wcześniej, możecie śmiało wykorzystać poniższy kod.

Podsumowanie

W dzisiejszym poradniku to wszystko. Jak zwykle chętnie wymienię się z Wami uwagami, za które już teraz z góry dziękuję. Do powyższego poradnika możecie pobrać kompletny kod źródłowy oraz sprawdzić jego działanie on-line.

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

Zdjęcie: freedigitalphotos.net



4 odpowiedzi na “Zakładki z treścią w stylu Google Gmail – przygotowanie krok po kroku”

  1. Piotr Nalepa pisze:

    Tutorial się na pewno przyda. Taka mała sugestia, zachowuj jednolity standard nazewnictwa elementów w kodzie. Raz widzę nazwy w stylu „camelcase” a innym razem z podkreśleniami.

  2. Comandeer pisze:

    Od kiedy tabindex bierze coś innego od liczby? wgl tu IMO nie powinno być tego atrybutu. No i bardziej do linkowania tabów mimo wszystko nadawałyby się… no własnie, linki. i zostajemy z CSS-owym :target

    ja bym wyszedł od mniej więcej takiego kodu HTML: https://github.com/Comandeer/VEKit-CSS/blob/5318f0b977b5303902ac3bf81318ca7adcf9f707/dist/index.html#L334

    IMO linki są sensowniejsze niźli button (bo mają służyć do przejścia do danego taba) i pozwalają to rozegrać nawet bez JS (jedynie nie zmieni się styl linku).

Dodaj komentarz

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