przykładowe taby na stronę

11 rozwiązań z użyciem tabs na twoją stronę internetową

Czas czytania: 2 minut

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

Czym charakteryzują się tabs:

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.

css tabs

by massimo
Tab przypominający kolorowe zakładki w notesie lub segregatorze. Przechodzenia między tabami znajduję się z boku.

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

Ten ciekawy tab nie zmienia tym razem treści a grafikę.

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

Adaptive tabs

by Lewi Hussey

Poniższy tab nie tylko posiada opcję dynamicznego przejścia miedzy zakładkami ale także zmienia się tło.

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

https://www.aurainweb.pl/2016/04/zakladki-nav-tabs-pills-bootstrap-js/
Pills
Tabsy