Ciekawe rozwiązania z użyciem tabów na stronie internetowej

przykładowe taby na stronę

Kategoria wpisu Frontend, Inspiracje, Kursy Tagi: , , , , on przez .



Poniżej znajdziecie kilka ciekawych zastosowań do różnych celów tabów (zakładek).

Czym charakteryzują się taby:

Tab jak sama nazwa mówi jest formą zakładki umieszczanej na stronie internetowej. Wykorzystywana jest do różnych celi od skrócenia długości strony poprzez umieszczenie istotnych informacji w konkretnej kategorii (np. różne warianty oferty) w ciągu witryny po całkowite zastąpienie nawigacji w witrynie.

Horizontal Tab Menu

Ciekawy przesuwający się tab wykonany z myślą o menu do jedno stronicowej strony internetowej. Nagłówki tabów mogą się chować i pokazywać.

See the Pen Horizontal Tab Menu by Ettrics (@ettrics) on CodePen.0

css tabs

by massimo
Tab przypominający kolorowe zakładki w notesie lub segregatorze.

See the Pen css tabs by massimo (@_massimo) on CodePen.0

Simple Bootstrap Side Tabs

by Jeremy Hawes
Kolejny tab w formie menu – tym razem bocznego. Tym razem zawartość pojawia się zastępując poprzednią.

See the Pen Simple Bootstrap Side Tabs by Jeremy Hawes (@jhawes) on CodePen.0

Material Tabs

by Michael Richins
Ciekawy tab w postaci menu. Zawartość strony jest dynamiczne zastępowana.

See the Pen Material Tabs by Michael Richins (@MrGrigri) on CodePen.0

Tabs

by Wallace Erick
Nieco bardziej klasyczny tab.

See the Pen Pure CSS Tabs by Wallace Erick (@wallaceerick) on CodePen.0

Tabs

by Nikita Jadhao

See the Pen Tabs by Nikita Jadhao (@jdniki) on CodePen.0

Responsive jQuery tabs

by Jonathan Clift

See the Pen Responsive jQuery tabs by Jonathan Clift (@cliftwalker) on CodePen.0

Vertical Tabs With Material Design Lite

by Rahul Sagore

See the Pen Vertical Tabs With Material Design Lite by Rahul Sagore (@rahul-sagore) on CodePen.0

Adaptive tabs

by Lewi Hussey

See the Pen Adaptive tabs by Lewi Hussey (@Lewitje) on CodePen.0

Sexy Tabs

by Srdjan Pajdic

See the Pen Sexy Tabs by Srdjan Pajdic (@MightyShaban) on CodePen.0

Tworzenie prostych Tabs i Pills z użyciem Bootstrap i jQuery


Pills
Tabsy

Przeczytaj również

Akordeon – rozwijaki i zwijaki na stronie Z akordeonem możemy spotkać się na różnych stronach internetowych. Najczęściej w dziale FAQ - gdzie z jego pomocą możemy rozwinąć odpowiedz na nasze p...
Przekreślenie Tekstu HTML/CSS W HTML istnieje kilka metod służących do przekreślania tekstu  i . Między oboma sposobami przekreślenia istnieją pewne różnice ...
Responsywne obrazki / zdjęcia z efektem Polaroid &... W jednym z wcześniejszych wpisów pisałam jak z użyciem PHP uzyskać efekt Polaroid dla zdjęć i ilustracji. Tym razem pokażę jak uzyskać ten sam efekt a...
Zmiana koloru linka po najechaniu kursorem –... Zmiana koloru linku () stanowi jeden z podstawowych efektów, jakie występują na stronie internetowej. Domyślnie tę cechę pos...