50+ Nice Čisto CSS Tab-Based Navigation Scripts
Ena od najpomembnejših nalog oblikovalca uporabniške izkušnje je zagotoviti, da navigacija spletne strani je preprosta in uporabniku prijazna. In kakšen drug način, da bi to omogočili, kot z navigacijskimi karticami.
Dobro oblikovane navigacijske kartice ne pomagajo samo uporabnikom vedeti, kam naj gredo, temveč so pomembne tudi za promet na notranjih straneh vašega spletnega mesta ali spletnega dnevnika..
Torej, za moje prijatelje spletnega oblikovalca, tukaj je dolg seznam lepih in čistih CSS tabulatorskih skriptov. Vsaka možnost ima a demo v živo skupaj s prenosom vira. Zato nadaljujte in poglejte sami.
zagonski zavihki-x - Razširjeni vtičnik z zavihki, zgrajen na vrhu zavihkov Bootstrap. Lahko poravnajte zavihke, zavrtite naslove, naložite vsebino prek AJAX, in številne druge funkcije. [Demo]
Čisti zavihki CSS z indikatorjem - Sodobna, vendar preprosta knjižnica zavihkov, zgrajena brez JavaScripta. To pomeni, da je hitro in lepo tudi - tako lepo, kot vidite na najbolj priljubljenih spletnih mestih. [Demo]
Tabby - Tabby vam omogoča ustvarjanje preprostih zavihkov, ki prikazujejo vse vsebine, vključno z videoposnetki. Ponuja različne napredne možnosti in podpira NPM in Bower tudi. [Demo]
Odzivno krmarjenje po karticah - Sodobna, priročna navigacija z zavihki, ki jo podpirajo JS in CSS, ki je zgrajena s pomocjo mobilnega telefona podpira vodoravne in navpične sloge za pozicioniranje. [Demo]
Toggler - Toggler je čisti JavaScript plugin za ustvarjanje preklopno sposobnih elementov, vključno z harmonike in zavihki. Prav tako lahko prikažete / skrijete le kateri koli element na strani. [Demo]
Čisti zavihki CSS - A preprost odrezek zavihkov, ustvarjen s pomočjo CSS in JS. Čeprav primerna koda prikazuje navadne zavihke, lahko zavihke vtisnete s spreminjanjem stylinga z uporabo CSS-ja. [Demo]
Tabsy CSS - Knjižnica samo za CSS za ustvarjanje preprostih komponent, kot so zavihki. Ta knjižnica, za razliko od nekaj zgornjih, ne potrebuje odvisnosti - niti nobene JS kode. [Demo]
Tabbis.js - Tabbis je preprost, a napreden vtičnik. Z uporabo naprednih možnosti konfiguracije lahko ustvarite ugnezdene zavihke in določite povratne klice tudi. [Demo]
Odzivni čisti zavihki CSS [Demo]
Tabulatorji CSS [Demo]
Zavihek z uporabo Pitaye - Kartice, ki uporabljajo Pitayo, vam pomagajo ustvariti preprosto animirajo prehodne kartice. Vendar pa morate vključiti Pitayo, ki je knjižnica sama po sebi in poveča čas nalaganja. [Demo]
jTabs - jTabs je knjižnica z zavihki, zgrajena s čistim JavaScriptom. To pomeni, da je zgrajena z brez zunanjih odvisnosti, kot je jQuery podpira tudi nekaj konfiguracijskih možnosti. [Demo]
Odzivni zavihki Flexbox [Demo]
Tabs Harmonika [Demo]
tabs.js - tabs.js je knjižnica čistega JavaScripta, ki jo navdihuje Accordion / Tabs of Bourbon Refills. Odzivno je tako, da zavihki se spremenijo v harmonike na majhnih zaslonih. [Demo]
DobroTabber - WellTabber je še en preprost plugin JavaScript, kot je Tabby. Tako kot slednja podpira različne možnosti konfiguriranja zavihkov. Prav tako lahko prikažete puščice za krmarjenje. [Demo]
Vmesnik z zavihki 3D kocke [Demo]
Moduli z zavihki za ES6 [Demo]
Spremenljive višine z zavihki CSS [Demo]
Tabulatorji za oblikovanje materialov - Sestavljen v obliki zavihkov, ki temelji na oblikovanju gradiva z uporabo Vanilla JavaScripta. je preprosta za uporabo in prilagodljiva. Vendar pa ne vsebuje naprednih možnosti. [Demo]
Animirani zavihki CSS - Animirani zavihki CSS so samo zavihki CSS, ki vam omogočajo ustvarjanje preprostih, lahkih zavihkov. Za razliko od Tabby ali WellTabber ne ponuja nobene napredne konfiguracije. [Demo]
pureTabs [Demo]
Vanilla JavaScript Dostopni zavihki [Demo]
Animirani zavihki v scifi slogu [Demo]
Čisti CSS Bootstrap Prilagodljivi zavihki - Sistem z zavihki Bootstrap, zgrajen z uporabo CSS in brez JavaScripta. Katera edinstvena funkcija prinaša je zavihki, ki se na zaslonu prilegajo, se premaknejo na spustni seznam. [Demo]
Zložljiva vrstica z zavihki - Pripomoček za zavihke, ki temelji na čisti CSS3 in brez JavaScripta, kot so različni vtičniki na tem seznamu. Zanimivo je, da imajo njegovi zavihki a lepo videti zložljiv prehod. [Demo]
Awesome CSS animirani zavihki [Demo]
JavaScript tabifier - Vtičnik za napredne kartice, zgrajen samo s JavaScriptom. Omogoča vam, da nastavite privzeti zavihek, dinamično spremenite zavihek in dodajte funkcije onLoad in onClick. [Demo]
Kartice okostja [Demo]
Tabtastic - Tabtastic je preprost vtičnik za izvajanje zavihkov s pomočjo CSS in JS. To uporablja semantično označevanje, je dostopno za bralnike zaslona, in podpira ugnezdene zavihke na strani. [Demo]
Kartice z mapami CSS3 & jQuery - O tej enostavni vadnici (s kodo, ki jo je mogoče prenesti) ustvarjanje zavihkov map z uporabo CSS3 in jQuery. Spominja me na zavihke, prikazane v brskalnikih, kot je Google Chrome. [Demo]
Vsebina z zavihki [Demo]
Navigacijske kartice za enako širino - Odrezek kode, ki prikazuje uporabo navadnega CSS-ja za izdelavo navigacijskih zavihkov enake širine. Ti lahko prilagodite videz, vendar ne ponuja naprednih možnosti iz polja. [Demo]
Vsebina z zavihki z jQuery & CSS [Demo]
Čarovnik za zagon programa Twitter - Twitter Čarovnik za zagon je plugin za izdelavo čarovnikov v obliki tabbable. Opazil sem, da lahko ustvarite samo zavihke tako, da skrijete ali odstranite naslednji in prejšnji gumb. [Demo]
Čisti zavihki CSS [Demo]
Odzivni zavihki CSS [Demo]
Samo še en zavihek CSS - Lepo oblikovana struktura zavihkov zgrajena s samo CSS, ki deluje na sodobnih brskalnikih. Vendar pa, za razliko od nekaj močnih plugins dal zgoraj, nima naprednih možnosti. [Demo]
Odzivna skladnost z zavihki - Odzivna skladnost z zavihki, kot že ime pove, deluje kot harmonika ali zavihki glede na širino zaslona. To Če je velikost majhna, so prikazani zavihki, če je to mogoče. [Demo]
CardTabs - CardTabs je ultra lahek vtičnik, ki temelji na jQuery, ki prihaja z več temami. Ustvarite lahko tudi nove teme in dinamično nastavite aktivno kartico. [Demo]
Aria Tabs [Demo]
Minimalni in seksi zavihki - Lep, nov odrezek zavihkov, ki je na voljo v dveh barvnih shemah - svetlo in temno. Zasnovana je z uporabo jQuery, zato ni tako lahka kot nekateri drugi vtičniki, navedeni zgoraj. [Demo]
Gradnik z zavihki [Demo]
Prilagodljivi zavihki - Prilagodljivi zavihki so preprost in lep odrezek zavihkov. Poleg sodobnega dizajna, nima več funkcij, kot je ta, ki je na voljo v nekaj zgoraj navedenih naprednih vtičih. [Demo]
Zavihek slog drevesa [Demo]
Tabulous.js [Demo]
JQuery Tabs - JQuery Tabs je preprost vtičnik za ustvarjanje zavihkov. Kot že ime pove, je zgrajena z uporabo jQuery, za razliko od nekaterih zgoraj navedenih vtičnikov ki so zgrajene s čistim CSS ali JavaScriptom. [Demo]
jQuery rTabs [Demo]
Opomba urednika: Ta objava je bila prvotno objavljena junija 2008 in je bila posodobljena aprila 2018 na podlagi nove vsebine.
