50+ kena puhast CSS-kaardipõhist navigeerimiskripti
Kasutaja kogemuse disaineri üks kõige olulisemaid ülesandeid on tagada, et veebisaidi navigeerimine on lihtne ja kasutajasõbralik. Ja mis muud viis seda teha, kui navigeerimislehtede kaudu.
Hästi kujundatud navigeerimiskaardid ei aita mitte ainult kasutajatel teada, kuhu minna, vaid ka oluline on liikluse suunamine teie veebisaidi või blogi sisemistele lehtedele.
Niisiis, minu veebidisainerite jaoks on siin pikk nimekiri kena ja puhta CSS-i kaardipõhistest navigatsiooniskriptidest. Igal valikul on a live demo koos allalaadimisallikaga. Nii et jätkake ja vaata ise.
bootstrap-tabs-x - Laiendatud vahekaartide plugin, mis on ehitatud Bootstrap kaartide ülaosale. See võib joondage sakid, pööra pealkirju, laadige sisu AJAXi kaudu, ja palju muid funktsioone. [Demo]
Puhtad CSS-kaardid koos indikaatoriga - Kaasaegne, kuid lihtne kaart, mis on ehitatud ilma JavaScriptita. See tähendab, et see on kiire ja ilus samuti - nii ilus kui näete kõige populaarsematel veebisaitidel. [Demo]
Tabby - Tabby abil saate luua lihtsaid vahekaarte, mis võivad näidata mis tahes sisu, sealhulgas videoid. See pakub erinevaid täiustatud valikud ning toetab NPM-i ja Boweri ka. [Demo]
Reageeriv klõpsuga navigeerimine - Kaasaegne, mugav tabeldatav navigatsioon, mida toetab JS ja CSS, mis on ehitatud mobiilse esimese meeles ja toetab nii horisontaalseid kui ka vertikaalseid positsioneerimisstiile. [Demo]
Toggler - Toggler on puhas JavaScripti plugin, mis võimaldab sisse lülitada elemente, sealhulgas akordionid ja sakid. Samuti saate näidata / peita ainult ükskõik millist lehekülje üksust. [Demo]
Puhtad CSS-kaardid - A CSS ja JS abil loodud lihtsad vahekaardid. Kuigi näidiskood näitab tavalisi vahekaarte, saate kaunistada kaarte, muutes nende stiili CSS abil. [Demo]
Tabsy CSS - Ainult CSS-i raamatukogu, mis võimaldab luua lihtsaid lülitamiskomponente, näiteks vahekaarte. See raamatukogu, erinevalt vähestest ülalnimetatutest, ei vaja mingit sõltuvust - isegi mitte ühtegi JS-koodi. [Demo]
Tabbis.js - Tabbis on lihtne, kuid täiustatud plugin. Kasutades oma täiustatud seadistusvõimalusi, saate seda teha luua sisestatud sakke ja määratleda tagasihelistamised ka. [Demo]
Tundlikud puhtad CSS-kaardid [Demo]
CSS-kaardid [Demo]
Vahekaardid Pitaya abil - Vahekaardid, mis kasutavad Pitaya'i, aitavad teil luua animeeritud üleminekulehed lihtsalt. Siiski peate lisama Pitaya, mis on raamatukogu ise ja suurendab laadimisaega. [Demo]
jTabs - jTabs on sakkide raamatukogu, mis on ehitatud puhta JavaScripti abil. See tähendab, et see on ehitatud väliseid sõltuvusi nagu jQuery ja toetab ka mõningaid konfiguratsioonivõimalusi. [Demo]
Reageerivad Flexboxi kaardid [Demo]
Vahekaartide vastavus [Demo]
tabs.js - tabs.js on puhas JavaScripti vahekaartide raamatukogu, mis on inspireeritud Bourboni täiteainete akordionist / tabeldusmärgist. See on nii tundlik vahekaardid muutuvad akordionideks väikestel ekraanidel. [Demo]
WellTabber - WellTabber on teine lihtne JavaScripti plugin nagu Tabby. Nagu viimane, see toetab mitmesuguseid vahekaartide konfigureerimise võimalusi. Samuti saate näidata navigeerimisnoole. [Demo]
3D Cube Tabbed liides [Demo]
ES6 vahekaartide moodul [Demo]
Muutuvad kõrgused CSS-kaartidega [Demo]
Materjali kujunduse kaardid - Materiaalse disainiga inspireeritud vahekaardilõigud, mis on ehitatud Vanilla JavaScripti abil. see on lihtne kasutada ja kohandada. Siiski ei sisalda see täiustatud valikuid. [Demo]
Animeeritud CSS-kaardid - Animeeritud CSS-kaardid on ainult CSS-i vahekaartide süsteem, mis võimaldab teil luua lihtsaid kergeid sakke. Erinevalt Tabby või WellTabberist on see ei paku ühtegi täiustatud konfiguratsiooni. [Demo]
pureTabs [Demo]
Vanilla JavaScript on saadaval vahekaartidel [Demo]
Scifi stiilis animeeritud kaardid [Demo]
Pure CSS Bootstrap Adaptive Tabs - Bootstrap-inspireeritud vahekaart, mis on ehitatud lihtsalt CSS-i ja JavaScript puudub. Mis unikaalne omadus see toob ekraani ülemäärased vahekaardid liigutatakse rippmenüüsse. [Demo]
Kokkupandav vahekaart - Vahekaardid, mis põhinevad puhtal CSS3-l ja JavaScriptil, nagu sellel loendil olevad erinevad pluginad. Mis teeb selle huvitavaks, on selle vahekaartidel a kena välimusega kokkupandav üleminek. [Demo]
Awesome CSS Animated Tabs [Demo]
JavaScript Tabifier - Täiustatud vahekaardi plugin, mis on ehitatud just JavaScriptiga. Selle abil saate määrata vaikekaardi, muuta vahekaarti dünaamiliselt ja lisada onLoad ja onClick sündmuse tagasihelistamise funktsioonid. [Demo]
Skeleton Tabs [Demo]
Tabtastiline - Tabtastika on lihtne plugin, mis võimaldab kaarte CSS ja JS abil kasutada. See kasutab semantilist märgistust, on ligipääsetav ekraanilugejatele, ja toetab lehe sisestatud sakke. [Demo]
CSS3 ja jQuery kaustade vahekaardid - Selline lihtne õpetus (allalaaditava koodiga) jaguneb umbes kaustade vahekaartide loomine CSS3 ja jQuery abil. See meenutab mulle vahekaarte, mida näidatakse sellistes brauserites nagu Google Chrome. [Demo]
Vahekaart [Demo]
Võrdse laiusega navigeerimiskaardid - Koodilõik, mis näitab lihtsa CSS-i kasutamist võrdse laiusega navigeerimiskleebide loomiseks. Sa saad kohandage väljanägemist, kuid see ei paku väljapoole täiustatud võimalusi. [Demo]
Sisestatud sisu jQuery & CSS-iga [Demo]
Twitter Bootstrap Wizard - Twitter Bootstrap Wizard on plugin, mille abil saab luua tabeldava struktuuriga võlureid. Ma märkasin, et sa võid luua lihtsalt vahekaarte järgmise ja eelmise nupu peitmise või eemaldamisega. [Demo]
Puhtad CSS-kaardid [Demo]
Vastavad CSS-kaardid [Demo]
Lihtsalt teine CSS-kaart - Kaunilt kujundatud vahekaart, mis on ehitatud vaid CSS-iga töötab kaasaegsetes brauserites. Kuid erinevalt mõnest ülaltoodud võimsast pluginast ei ole sellel täiendavaid suvandeid. [Demo]
Reageeriv harmoonia kaartidega - Reageeriv harmoonia vahekaartidega, nagu nimigi ütleb, töötab ekraani laiuse alusel akordionina või sakkidena. See näitab, kui võimalik, vahekaarte, kui suurus on väike. [Demo]
CardTabs - CardTabs on ultra-kerge vahekaartide plugin, mis põhineb jQuery-l, mis sisaldab mitmeid teemasid. Samuti saate luua uusi teemasid ja määrata aktiivse vahekaardi dünaamiliselt. [Demo]
Aria Tabs [Demo]
Minimaalne ja seksikas vahekaart - See on ilus uus vahekaardilõik saadaval kahes värvikavas - heledas ja pimedas. See on ehitatud kasutades jQuery, nii et see ei ole nii kerge kui mõned teised eespool loetletud pluginad. [Demo]
Vahekaart [Demo]
Kohanduvad kaardid - Kohanduvad vahekaardid on lihtne ja ilus vahekaartide fragment. Lisaks kaasaegsele disainile ei ole sellel rohkem funktsioone, nagu on saadaval mõnedes ülalkirjeldatud lisandmoodulites. [Demo]
Puu stiilis kaart [Demo]
Tabulous.js [Demo]
jQuery kaardid - jQuery vahekaardid on lihtsa plugina kaartide loomiseks. Nagu nimigi ütleb, on see ehitatud jQuery abil, erinevalt mõnedest eespool loetletud pluginatest mis on ehitatud puhta CSS või JavaScript. [Demo]
jQuery rTabs [Demo]
Toimetaja märkus: See postitus avaldati algselt 2008. aasta juunis ja seda uuendati 2018. aasta aprillis uue sisu alusel.
