Poniżej znajdziecie kilka ciekawych zastosowań do różnych celów tabów (zakładek).
Co znajdziesz w tym wpisie
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.
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