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ż

Rosnący pasek postępu podczas przewijania strony Rosnący pasek postępu podczas przewijania strony internetowej to często mało widoczna animacja. Dzięki niej możemy zobaczyć, w którym miejscu witryny ...
Właściwość CSS – text-align-last Właściwość CSS text-align-last służy do określania sposób wyrównania ostatniej linki tekstu. Poza tym drobnym szczegółem text-align-last działa analog...
Sześciokąty rozmieszczone obok siebie CSS Jakiś czas temu odwiedziłam stronę, której autor umieściła swoje portfolio w postaci sześciokątów (hexagonu) czyli kilku sześciokątów. Zrobiło to na m...
Kierunek pisania tekstu właściwość direction / uni... Własność direction służy do ustawiana kierunku pisania tekstu. Przydatna jest np. w przypadku kiedy chcemy napisać, stworzyć stronę w innym języku ta...